如何使嵌套的Reaction路由器组件加载到新页面,而不是加载到页面的一半

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

本文介绍了如何使嵌套的Reaction路由器组件加载到新页面,而不是加载到页面的一半的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我当前的情况是,我的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路由器组件加载到新页面,而不是加载到页面的一半的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:如何使嵌套的Reaction路由器组件加载到新页面,而不是加载到页面的一半

基础教程推荐