是否可以使用 React Route 执行以下操作?
主要
<Routes handler={App}>
<Profile path="profile" />
<Explore path="explore" />
</Routes>
简介
<Route>
<Route name="dashboard" handler={ProfileDashboard} />
<Route name="repos" handler={ProfileRepos} />
</Route>
探索
<Route>
<Route name="home" handler={ExploreHome} />
<Route name="showcase" handler={ExploreShowcase} />
</Route>
最佳答案
您可以使用 React Router 来实现这一点! :)
但我建议您检查一下“简单路由”方式来配置您的路由:
使用它,您将开始使用routes
对象,并且您可以需要
另一个路线并根据这些组合创建您的路线。类似这样的事情:
const routes = {
path: '/',
component: App,
childRoutes: [
require('./profile'),
require('./explore')
]
}
然后在您的 profile.js
(您可以对 explore.js
执行相同操作)文件中,您将看到类似的内容:
/* Import the ProfileDashboard and ProfileRepos here */
const profileRoutes = {
path: 'profile',
childRoutes: [{
path: 'dashboard',
component: ProfileDashboard
}, {
path: 'repos',
component: ProfileRepos
}]
};
这样你就可以实现你想要的。
如果你确实不能使用普通路由,你可以这样做:
<Route path="/" component={App}>
{ require('./profile') }
{ require('./explore') }
</Route>
还有你的profile.js
,例如:
module.exports = (
<Route path="profile">
<Route path="dashboard" component={ProfileDashboard} />
<Route path="dashboard" component={ProfileRepos} />
</Route>
);
我不知道您使用的 React Router 版本是什么,但您可以在任何版本中实现这一目标,但是,作为建议,请尝试使用最新版本。因为它可以处理很多很酷的东西。
希望对你有帮助!
关于reactjs - React 路由将子路由移动到单独的模块?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38165107/