Đường lồng nhau trong phản ứng-router

Question

Tôi đang thiết lập một số tuyến đường lồng nhau trong React-Router (v0.11.6 là những gì tôi đang làm việc), nhưng bất cứ khi nào tôi thử và truy cập một trong các tuyến đường lồng nhau, nó kích hoạt tuyến đường mẹ.

tuyến đường của tôi trông như thế này:

<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> 

Nếu tôi sụp đổ các tuyến đường lên để nó trông giống như:

<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> 

Nó hoạt động tốt. Lý do tôi làm tổ là bởi vì tôi sẽ có nhiều trẻ em dưới "bảng điều khiển" và muốn tất cả chúng được bắt đầu bằng số dashboard trong URL.

Answer 1

Cấu hình không phải là về định tuyến (mặc dù tên) nhưng nhiều hơn về bố cục được điều khiển bởi đường dẫn.

Như vậy, với cấu hình này:

<Route name="dashboard" handler={availableRoutes.Dashboard}> 
    <Route name="dashboard-child" handler={availableRoutes.DashboardChild} /> 
</Route> 

Người ta nói rằng dashboard-child là được nhúng bên trong dashboard. Cách làm việc này là nếu dashboard có một cái gì đó như thế này:

<div><h1>Dashboard</h1><RouteHandler /></div> 

và dashboard-child có:

<h2>I'm a child of dashboard.</h2> 

Sau đó cho đường dẫn dashboard không có con nhúng do không có con đường phù hợp, dẫn đến điều này:

<div><h1>Dashboard</h1></div> 

Và đối với đường dẫn dashboard/dashboard-child con được nhúng có đường dẫn phù hợp, dẫn đến điều này :

<div><h1>Dashboard</h1><h2>I'm a child of dashboard.</h2></div> 

Answer 2

Tôi gặp sự cố tương tự. Tôi nghĩ rằng đoạn mã sau có thể phù hợp với bạn:

... 
<Route name="dashboard"> 
    <Route path="/" handler={availableRoutes.Dashboard}/> 
    <Route name="dashboard-child" path="dashboard-child" handler={availableRoutes.DashboardChild}/> 

    <DefaultRoute handler={availableRoutes.Dashboard}/> 
</Route> 
... 

Answer 3

Đây là bản cập nhật cho câu trả lời của @ bjfletcher cho bộ phản ứng-bộ định tuyến 1.0.0. Như đã lưu ý trong số upgrade guide:

RouteHandler đã biến mất. Router giờ sẽ tự động điền this.props.children thành phần của bạn dựa trên tuyến đường đang hoạt động.

Vì vậy, thay vì

<div><h1>Dashboard</h1><RouteHandler /></div>

bạn sẽ sử dụng:

<div><h1>Dashboard</h1>{this.props.children}</div>