我正在使用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>
);
}
}
不要问我为什么,但我想创建以下网址:
我在我的App.js
文件中添加了这个并且它的工作原理:
<Route exact path="/signup" component={SignUp} />
<Route exact path="/signup/person" component={SignUpPerson} />
<Route path="/signup/person/:id" component={SignUpId} />
但是我想知道它是否是创建嵌套路线的好方法,或者最好像这篇文章一样分隔路线:https://stackoverflow.com/a/43846223/4023379
或者另一种方式?
谢谢
如果Pages具有常见的逻辑/组件(如Header,Footer),则使用嵌套路由。
如果Page不共享相似的逻辑,则使用单独的路由。只是因为url以/singup
开头没有必要意味着你必须嵌套你的组件