Question

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

我想要实现的是

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

当前问题是单击某项而不是仅渲染EventsItemOverview组件时，它将在“事件”下方渲染。两个组件（Events＆EventsItemOverview）。 如何根据网址路径一次在<Content>中仅渲染1个组件？

事件下方的当前输出负载组件

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

Root.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>
  );

Layout.js

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

Events.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>

  );

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。

React-router如何在子代中加载嵌套子代？

1 个答案: