在React Router中设置相对路径

施纳皮

当路由通过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设置/为该组件内,还是每次都必须显式键入完整路径?

我看到一些讨论在讨论一些非常相似的内容(例如:react-router是否支持相对链接?),但是可以配置路由器路径吗?<Link to="users" />据说可以工作,但我无法到达<Route path="users" />

大通德安达

没有“魔术”react-router可以自动注入当前位置,但是您可以使用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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章