reactjs - 在 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? )但是路由器 有什么东西吗？路径 那可以配置吗？ <Link to="users" />据说可以用，但我找不到 <Route path="users" />到。

Answer 1

react-router中没有“魔法”这将自动注入(inject)当前位置，但您可以使用 this.props.location 轻松完成。从 <Router /> 传递给组件:

所以如果你已经在 /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>