当路由通过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] 删除。
我来说两句