Question

我的应用程序具有嵌套的开关，我正在尝试找出如何创建一个可从一个导航到另一个的链接。该应用程序的结构如下：

App
  Main switch (/)
    Assets switch (/assets/)
      Table component with Link
    Templates switch (/templates/)
      Object viewer component to be linked too

链接组件如下所示，其id为模板UUID：

<Link to={`/templates/${id}`} {...itemProps} />

但是，当您单击链接时，您将转到/ assets / correct-UUID。

我找不到关于此的任何信息，所以我不确定这是否是教程未涵盖的经典中间问题，这是不可能的，或者我只是做错了什么。有谁知道它是哪一个？

Answer 1

这同时破坏了交换机和路由器的作用。来自docs：

呈现与位置匹配的第一个孩子<Route>或<Redirect>。

Switch基本上可以确保路由器中仅呈现一个组件。为了获得最佳结果，请将路由保留在一个组件中，因为几乎不需要像您一样嵌套它们。例如：

import { Switch, Route } from 'react-router'

<Switch>
  <Route exact path="/" component={Main}/>
  <Route path="/assets" component={Assets}/>
  <Route path="/templates" component={Templates}/>
</Switch>

因此，您可以在应用程序入口点定义路由，例如App.js。就是这样，如果您需要更多路线，请在此处添加它们。如果要嵌套的路由，可以通过逐字嵌套它来嵌套：<Route path="/assets/:id/update" component={AssetUpdate} />。这就是全部。

在React Router v4中的嵌套交换机之间移动

1 个答案: