如何使嵌套的Reaction路由器组件加载到新页面，而不是加载到页面的一半 [英] How to make a nested react router component load to a new page and not half-way down the page

问题描述

我当前的情况是，我的App.js文件中有我的主要父路由/交换机，但在App.js文件中的某个路由中，我还有另一个组件，该组件也具有自己的<Router>路由/交换机设置，该组件调用名为<MyJobComponent />的另一个组件

我设置的文件层次结构如下：

App.js - has route/path to the component <AllJobs />
  |
  |---> AllJobs.js - has nested route/path to the component <MyJobComponent />
           |
           |---> MyJobComponent.js - has the <Link to={`/my-job-id/${item.job_id}`}

该组件在此处以AllJobs.js级别呈现，而不是在App.js级别呈现，而我希望它呈现在App.js级别。

<Switch>
  <Route exact path="/job-path/:jobID" component={MyJobComponent} />
</Switch>

在<MyJobComponent />中，我有以下Link to代码：

<TableCell style={{width: '10%'}}>
  <Link
     to={`/my-job-id/${item.job_id}`}
     style={{ textDecoration: 'underline', color: 'black' }}
  >             
    {item.job_id}
  </Link>
</TableCell> 

单击此Link to将使我的页面位于<MyJobComponent />内页面的一半位置

根据反应路由器嵌套示例

更新

查看此示例：React-Router Nested如果您单击Topics，然后单击子链接Components，您将看到它在这些子链接下方显示标题components。

我想要在它自己的页面上显示的是子链接下面的这一部分，即components。这可能吗？

推荐答案

将此代码移至App.js：

<Switch>
  <Route exact path="/job-path/:jobID" component={MyJobComponent} />
</Switch>

这篇关于如何使嵌套的Reaction路由器组件加载到新页面，而不是加载到页面的一半的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！