在 React-Router-Dom 中声明嵌套路由的方式
Posted
技术标签:
【中文标题】在 React-Router-Dom 中声明嵌套路由的方式【英文标题】:Which way to declare nested routes in React-Router-Dom 【发布时间】:2019-08-26 00:20:11 【问题描述】:我正在使用 reactJs 并尝试创建一些嵌套路由。 您可以在下面看到我的文件的路由部分:
main.js:
ReactDOM.render(
<Router>
<App />
</Router>,
document.getElementById('page')
);
App.js:
class App extends Component
render()
return (
<div>
<Header />
<Switch>
<Route exact path="/" component=Home />
<Route path="/login" component=Login />
<Route path="/signup" component=SignUp />
<Route path="/contact" component=Contact />
<ProtectedRoute path="/user/profile" component=Profile />
<Route component=NotFound />
</Switch>
<Footer />
</div>
);
不要问我为什么,但我想创建以下网址:
/signup : 注册表单 /signup/person : 注册表格第 2 部分 /signup/person/:id : 注册用户id信息我在我的App.js
文件中添加了这个,它的工作原理:
<Route exact path="/signup" component=SignUp />
<Route exact path="/signup/person" component=SignUpPerson />
<Route path="/signup/person/:id" component=SignUpId />
但我想知道这是否是创建嵌套路由的好方法,或者最好像这篇文章那样分隔路由:https://***.com/a/43846223/4023379
或者其他方式?
谢谢
【问题讨论】:
这主要是基于意见的最佳方法。任何一个都可以正常工作。 【参考方案1】:如果页面具有共同的逻辑/组件,如页眉、页脚,则使用嵌套路由。
如果 页面 不共享类似的逻辑,则使用单独的路由。仅仅因为 url 以 /singup
开头,这并不意味着你必须嵌套你的组件
【讨论】:
以上是关于在 React-Router-Dom 中声明嵌套路由的方式的主要内容,如果未能解决你的问题,请参考以下文章
使用链接后,在嵌套路由中未定义 React-router-dom 参数
React-router-dom:嵌套路由不起作用,而是从根组件应用程序中路由
嵌套路由(React-Router-Dom 6.0.2)未按预期工作
React-router-dom:非常简单的嵌套路由不起作用