react-router - 决定里面的哪条路线根据条件渲染

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>

通常，这可以通过使用带有条件的组件来显示任一组件来非常容易地实现，但是我的要求是我想动态加载用户和项目特定的组件（导入由自动处理） webpack，react-loadable所以它看起来就像我需要一个路由级别的解决方案，或者可能是使用react-loadable.

编辑 问题是我为路线指定了错误的路径。只要我将更具体的 ( project) 路线放在首位，就可以做我想做的事<Switch />

标签： react-routerreact-loadable

Answer 1

您正在寻找的是exact.

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

来自 v4文档。