Question

React Router的第4版

我有一个子路由设置：/profile/agree，在该子路径上，我希望<Link>标记转到/team。

现在设置好，所以父页面有：

<Router>
  <Switch>
    <Route exact path="/" component={Home} />
    <Route path="/profile" component={Profile} />
    <Route path="/team" component={Team} />
  </Switch>
</Router>

配置文件组件有自己的路由：

<Router>
  <Switch>
    <Route exact path="/profile" component={General} />
    <Route path="/profile/hotel" component={Hotel} />
    <Route path="/profile/release" component={Release} />
  </Switch>
</Router>

这是否正确，我不确定，因为没有一个文档可以解释这种情况，但这对我来说是有意义的。无论如何，当“Release”组件有一个简单的链接时，它似乎没有正确导航，只显示一个空白页面：

<a href="/team">Somehow</a> {/* << This works but refreshes the whole page */}
<Link to="/team">Of Course</Link> {/* << This just shows empty profile page /*}

我想也许子路由器只能看起来像它本身一样高，所以也许：

<Link to="../team">Of Course</Link>

但那也做了同样的事情。它似乎仍然是“概况”的主要途径。如何导航到不同的父路线？

Answer 1

所以我最终弄清楚了我遇到的简单错误。 Profile中有<Router>的事实！

在Profile中执行此操作（只需删除路由器标记）：

  <Switch>
   <Route exact path="/profile" component={General} />
   <Route path="/profile/hotel" component={Hotel} />
   <Route path="/profile/release" component={Release} />
 </Switch>

这给了我认为最有意义的东西。每个“场景”负责它自己的路由。唯一的缺点是它仍然需要/profile，虽然我可能会变得狡猾，并将“根”作为属性发送到场景。

React Router子路由调用不同的父路由

1 个答案: