是否可以使用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>
答案 0 :(得分:1)
你可以通过React Router实现这一目标! :)
但我建议您查看配置路线的“普通路线”方式:
使用此功能,您将开始使用routes
对象,您只需require
个其他路线,并根据这些组合创建路线。这样的事情:
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版本,但是您可以在任何版本中实现,但作为建议,请尝试使用最新版本。因为它处理了很多很酷的东西。
希望它有所帮助!