当路由通过 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" />
到。
最佳答案
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>
关于reactjs - 在 React Router 中设置相对路径,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53711964/