在页面的特定部分渲染组件

Question

MainComponent.jsx

//other code
<CardGroup>
  <Router>
    {cards.map((value,idx) => { return <TutorialCard key={idx} val={value} /> })}
    <Switch>
      <Route path="/subject/:title" children={(props)=>{<ContentPage {...props}/>}}/>
    </Switch>
  </Router>
</CardGroup>
//other code

ContentPage.jsx

我想在特定部分/新页面中显示此组件。

export default function CotentPage(props){
  return <h1>This is content page-{props.match.params.title}</h1>  
}

TutorialCard.jsx

//this component create links.
export default function tutorialCard({ val }) {
  return (
    <Card border="primary" style={{ width: '18rem' }} className='cards'>
      <Link exact to={`/subject/${val}`}>
        <Card.Header className="text-center">
          <h6>{val}</h6>   
        </Card.Header>
        <Card.Body>
          <img src={cardSvg} className="fitImage"></img>
        </Card.Body>
      </Link>
    </Card>
  );
}

单击这些链接后，它会在链接之外呈现 ContentPage。但我想在新页面中呈现 ContentPage。我怎样才能做到这一点？ 请帮忙！

Answer 1

原因是，卡片的渲染独立于您的路线。您需要在另一条路线中渲染您的卡片。像这样：

<Router>
  <Switch>
    <Route
      path="/"
      exact
      children={() => (cards.map((value, idx) => <TutorialCard key={idx} val={value} />))}
    />
    <Route
      path="/subject/:title"
      children={(props) => <ContentPage {...props} />}
    />
  </Switch>
</Router>