如何在React Router 1.0中模擬DefaultRoute

Question

因此，切換到最新的React路由器（1.0.0RC3）。我遇到了一些舊功能，我無法找到如何使用新的1.0 API進行復制。

在我的路由器中，我總是渲染頂級App組件，然後是第二級Layout組件，然後是Page組件。在舊的React路由器中，我不必在Route上放置path屬性，所以我可以將某些路由「組合」爲擁有父組件，而無需向我的url添加另一個級別。

下面，您會看到當擊中/路線時，我嘗試加載App，DefaultLayout和Home。但是，如果沒有明確的path屬性，它將不會呈現DefaultLayout。因此，如果我將path="app"放在我的默認佈局上，它可以正常工作，但如果可能，我會嘗試不更改我的主頁路線。

我試過把路徑關掉，把絕對路徑，使用嵌套IndexRoutes（不起作用）。在RR 1.0中仍然有辦法做到這一點？

export const routes = (
    <Router history={createBrowserHistory()}> 
     <Route path="/" component={App}> 
      <Route component={DefaultLayout}> // Requires `path` Here 
       <IndexRoute component={Home} /> 
       <Route path="about" component={About} /> 
       <Route path="contact" component={Contact} /> 
       <Route path="careers" component={Careers} /> 
      </Route> 
      <Route path="blog" component={BlogLayout}> 
       <IndexRoute component={BlogHome} /> 
       <Route path="posts/:post_name" component={BlogPost} /> 
      </Route> 
     </Route> 
    </Router> 
); 

Answer 1

如果我理解正確的你，你的路線應該是這樣的：

export const routes = (
    <Router history={createBrowserHistory()}> 
     <Route component={App}> 
      <Route path="/" component={DefaultLayout}> // Requires `path` Here 
       <IndexRoute component={Home} /> 
       <Route path="about" component={About} /> 
       <Route path="contact" component={Contact} /> 
       <Route path="careers" component={Careers} /> 
      </Route> 
      <Route path="blog" component={BlogLayout}> 
       <IndexRoute component={BlogHome} /> 
       <Route path="posts/:post_name" component={BlogPost} /> 
      </Route> 
     </Route> 
    </Router> 
);