如何使嵌套的反应路由器组件加载到新页面而不是页面的一半答案

【问题标题】：How to make a nested react router component load to a new page and not half-way down the page如何使嵌套的反应路由器组件加载到新页面而不是页面的一半
【发布时间】：2021-08-13 09:15:27
【问题描述】：

我目前有这样一种情况，我的主要父路由/开关在我的 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 级别呈现，这是我希望它呈现的位置。

<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 嵌套示例更新

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

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

【问题讨论】：

真的不清楚，从你问的问题来看，问题是什么。如果你想让我帮忙，我必须了解发生了什么
@Delice - 问题是在<MyJobComponent /> 组件中，我在表格单元中有一个列，它是Link To 另一个名为<MyJobComponentInfo /> 的组件，它是位于Route exact path 的一部分在AllJobs.ls 组件中。考虑到这一点，当我单击指向<MyJobComponent /> 中列的表格单元链接时，我的实际<MyJobComponentInfo /> 正在页面的中间呈现——基本上在AllJobs.js 级别，而不是从页面顶部。类似的东西：stackoverflow.com/questions/49404037/…

标签： javascript reactjs react-router-dom react-router-v4

【解决方案1】：

将此代码移至 App.js：

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

【讨论】：

尝试了您在此处提出的建议，不幸的是，将此路线移至App.js，现在实际的MyJobComponent 组件根本没有被渲染。当我单击Link To 列时，基本上没有任何反应。有什么想法吗？
另外，我阅读了其他提到这个There should be only one ROUTER in the whole app, which I think if your head file is App.js, then the ROUTER should wrap the whole App.js component 的 SO 线程 - 我实际上有一个嵌套路由，我在 Material-ui 选项卡系统中使用它。这是否会导致我拥有多个 ROUTER 时出现任何问题？
包含一个实际示例来反映我的问题到底是什么。