Reactjs 如何在子对象中加载嵌套子对象？

我有一个嵌套路由，导航栏将在其中加载

中的组件

我想要达到的是

• 用户从导航栏单击事件
• Layout.js中的事件组件呈现
• 事件组件包含事件项的列表
• 单击其中一个事件项
• EventItemsOverview组件仅在
  中呈现

当前的问题是，当单击某个项而不是仅呈现EventsItemOverview组件时，它会在事件下方呈现该项。两个组件（事件和事件站点移动视图）如何根据url路径在

中一次只渲染一个组件？

当前输出加载事件下面的组件

预期输出：单击事件时，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>
  );

返回(
{props.children}
);

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>

  );

返回(
{
data.events.map（事件=>(
))}
}/>
);

好的，您需要

应用程序中的route来处理该问题


函数应用程序（）{
返回(
)；
很抱歉，我不明白问题出在哪里。路由器显示两个事件项？我认为您应该提供一个JSIDLE或等效的事件项来帮助我们帮助您：）事件和事件项是在Layout.js中发现的两个不同组件。我试图仅在用户单击列表中的事件时加载EventItemhin事件。请参阅提供的图像OK，我理解您提供的代码中的大部分内容。我不理解的是，为什么在内容中呈现两个组件。您使用的是react router switch，一次只呈现一个组件。您至少可以提供Event.js吗？您正在谈论的映射？（我认为您不需要在此处的路线上渲染，但我不能确定）我已经更新了我的答案。很抱歉，我对react router还是新手，因为我正试图了解如何根据其中的url路径加载单个组件。我不是要加载两个组件，而是只想加载一个。好吧，你的解释真的很难理解。让我总结一下我所了解的。你有
事件
组件和nested
EventsItems
（数量取决于
data.events
props）。当单击
EventsItems
时，它应该只呈现
EventItemOverview
，而没有作为父
Events
组件。因此，如果url
Events/
它应该转到
Events
，如果
Events/23
到
EventItemOverview
。它正确吗？我以前尝试过这个，它仍然加载该组件以下活动：（当我从事件中删除路由时。URL会更新，但是组件不会呈现从
事件中删除
路由
，并将
精确的
添加到
应用程序中的路由中。
啊，对了，所以我只需要在我的事件路由中添加精确的。因为我在事件级别向我的路由传递道具。我如何从我的根目录传递道具？如何在您将它们传递给
事件之前
？事件包含虚拟数据，所以我只调用了该数据。假设我需要将其向上移动并创建一个提供程序？