Question

我有两种路线：user和project路线。 user路由是顶级URL资源，而project属于user。例如：/users/1/foo和/users/1/projects/2/bar。

仅当路由中不包含/projects/:id时，我才想显示特定于用户路由的组件，而当路由中不包含特定于项目的组件时。

在两种情况下尝试以下操作都会加载/users/:id路由：

<Switch>
  <Route path="/users/:id" component={...} />
  <Route path="/users/:id/projects/:projectId" component={...} />
</Switch>

<Switch>
  <Route path="/users/:id/projects/:projectId" component={...} />
  <Route path="/users/:id" component={...} />
</Switch>

通常，通过具有条件显示组件的组件可以很容易地做到这一点，但是我的要求是我想动态加载用户和项目特定的组件（导入由{{1}处理}和webpack自动），因此看起来我需要一个路由级解决方案，或者可能需要使用react-loadable进行自定义。

编辑问题是我为路线指定了错误的路径。只要我先将更具体的（react-loadable）路线放在project

内，就可以做我想做的事情

Answer 1

您要寻找的是exact。

<Switch>
    <Route exact path="/users/:id" component={...} />
    <Route exact path="/users/:id/projects/:projectId" component={...} />
</Switch>

来自v4 docs。

根据条件决定要在<switch>内部呈现的路由

1 个答案: