在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设置为/，还是每次都必须显式键入完整路径？

我看到一些讨论在讨论非常相似的内容（例如：），但是路由器路径是否可以配置？据说<Link to="users" />可以工作，但是我无法使用<Route path="users" />。

Answer 1

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

因此，如果您已经在/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>