我正在React-Router中设置一些嵌套路由（我正在针对v0.11.6进行设置），但是每当我尝试访问其中一个嵌套路由时，都会触发父路由。
我的路线如下所示：
<Route handler={App}>
<Route name="home" path="/" handler={availableRoutes.Splash} />
<DefaultRoute handler={availableRoutes.Splash} />
<Route name="dashboard" handler={availableRoutes.Dashboard}>
<Route name="dashboard-child" handler={availableRoutes.DashboardChild} />
</Route>
<NotFoundRoute handler={NotFound} />
</Route>
如果我将路线折叠起来，它看起来像：
<Route handler={App}>
<Route name="home" path="/" handler={availableRoutes.Splash} />
<DefaultRoute handler={availableRoutes.Splash} />
<Route name="dashboard" handler={availableRoutes.Dashboard} />
<Route name="dashboard-child" path="/dashboard/dashboard-child" handler={availableRoutes.DashboardChild} />
<NotFoundRoute handler={NotFound} />
</Route>
它工作正常。我之所以嵌套，是因为我将在“仪表盘”下有多个子代，并希望它们dashboard在URL中都带有前缀。
配置与路由无关（尽管有名称），而是与路径驱动的布局有关。
因此，使用此配置：
<Route name="dashboard" handler={availableRoutes.Dashboard}>
<Route name="dashboard-child" handler={availableRoutes.DashboardChild} />
</Route>
就是说dashboard-child要嵌入到里面dashboard。这是如何工作的，如果dashboard具有以下内容：
<div><h1>Dashboard</h1><RouteHandler /></div>
并且dashboard-child具有：
<h2>I'm a child of dashboard.</h2>
然后，dashboard由于没有匹配的路径，因此该路径没有嵌入的子代，从而导致：
<div><h1>Dashboard</h1></div>
对于该路径dashboard/dashboard-child，嵌入式子代具有匹配的路径，结果是：
<div><h1>Dashboard</h1><h2>I'm a child of dashboard.</h2></div>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句