我正在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中都带有前缀。
dashboard
配置与路由无关(尽管有名称),而是与路径驱动的布局有关。
因此,使用此配置:
<Route name="dashboard" handler={availableRoutes.Dashboard}> <Route name="dashboard-child" handler={availableRoutes.DashboardChild} /> </Route>
就是说dashboard-child要嵌入到里面dashboard。这是如何工作的,如果dashboard具有以下内容:
dashboard-child
<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,嵌入式子项具有匹配的路径,结果是:
dashboard/dashboard-child
<div><h1>Dashboard</h1><h2>I'm a child of dashboard.</h2></div>