reactjs - React-router如何在孩子中加载嵌套的孩子？

Question

我有一个嵌套路由，导航栏将在其中加载组件<Content>。

我想要实现的是

• 用户从导航栏点击事件
• <Content>在 Layout.js中找到的事件组件呈现
• 事件组件包含一个 EventItems 列表
• 单击了其中一个 EventItems
• EventItemsOverview 组件<Content>仅在内部呈现。

当前的问题是当一个项目被单击而不是仅呈现 EventsItemOverview 组件时，它会在事件下方呈现它。两个组件（Events & EventsItemOverview）。如何<Content>根据 url 路径一次只渲染 1 个组件？

当前输出负载组件低于事件

预期输出：单击事件时，EventItemOverview 应该只呈现。**下面的图片是正确的，但标题应该是 EventItemOverview **。链接事件/id123

根.js

function App() {
  return (
    <Router>
      <Layout>
        <Switch>
          <Route path="/home" component={Home} />
          <Route path="/events" component={Events} />
          <Redirect from="/" to="/home" exact />
          <Route component={Notfound} />
        </Switch>
      </Layout>
    </Router>
  );

布局.js

 return (
    <Layout>
      <MenuNav />
      <Layout>
        <Content>
          {props.children}
        </Content>
      </Layout>
    </Layout>
  );

事件.js

 return (
    <Fragment>
      <Row type="flex" justify="center">
        <Col>
          <Row type="flex" gutter={12} justify="center">
            {
              data.events.map(event => (
                <Col>

                  <EventItem data={event} />

                </Col>
              ))}
          </Row>
        </Col>
      </Row>
      <Row type="flex" justify="end" align="bottom">
        <Col>
          <Pages />
        </Col>
      </Row>

      <Route exact path={`/events/:eventId`}  component={(props) => <EventItemOverview {...props} data={data} />}/>

    </Fragment>

  );

标签： reactjsreact-routerreact-router-v4react-propsreact-router-v5

Answer 1

好的，您需要路由App来处理。

function App() {
  return (
    <Router>
      <Layout>
        <Switch>
          <Route path="/home" component={Home} />
          <Route exact path="/events" component={Events} />
          <Route exact path="/events/:id" component={EventItemOverview} />
          <Redirect from="/" to="/home" exact />
          <Route component={Notfound} />
        </Switch>
      </Layout>
    </Router>
  );

也Route从Events.