在 React Router 中设置相对路径

Question

当路由通过 React Router 中的组件时，有没有办法缩短路径长度？例如在App.js:

<Switch>
  <Route exact path="/" component={Landing} />
  <Route exact path="/login" component={Login} />
  <PrivateRoute path="/main" component={Main} />
  <Route component={NotFound} />
</Switch>

在Main.js 组件中：

<Switch>
    <Route exact path="/main" component={Dashboard} />
    <Route exact path="/main/users" component={Users} />
</Switch>

每次我在Main 组件中时，我可以以某种方式省略在/main/users 之前添加/main 吗？可以在该组件中将/main 设置为/，还是我每次都必须明确输入完整路径？

我看到讨论讨论非常相似的内容（例如：Does react-router support relative links?），但是路由器 paths 有什么可以配置的吗？据说<Link to="users" /> 可以工作，但我无法让<Route path="users" /> 工作。

Answer 1

react-router 中没有“魔法”会自动注入当前位置，但您可以使用从<Router /> 传递给组件的this.props.location 轻松做到这一点：

因此，如果您已经在 /main，您可以将路径设置为：

<Switch>
  <Route exact path={`${this.props.location.pathname}`} component={Dashboard} />
  <Route exact path={`${this.props.location.pathname}/users`} component={Users} />
</Switch>

解析为：

<Switch>
  <Route exact path="/main" component={Dashboard} />
  <Route exact path="/main/users" component={Users} />
</Switch>