路由配置

我們來通過一個簡單的例子解釋一下如何編寫路由配置。

React.render((
  <Router>
    <Route path="/" component={App}>
      <Route path="about" component={About} />
      <Route path="inbox" component={Inbox}>
        <Route path="messages/:id" component={Message} />
      </Route>
    </Route>
  </Router>
), document.body)

通過上面的配置，這個應用知道如何渲染下面四個 URL：

添加首頁IndexRoute

想象一下當 URL 為 / 時，我們想渲染一個在 App 中的組件。不過在此時，App 的 render 中的this.props.children 還是 undefined。這種情況我們可以使用 IndexRoute 來設置一個默認頁面

<IndexRoute component={Dashboard} />

絕對路徑 讓 UI 從 URL 中解耦出來

React.render((
  <Router>
    <Route path="/" component={App}>
      <IndexRoute component={Dashboard} />
      <Route path="inbox" component={Inbox}>
        {
 
/* 使用 /messages/:id 替換 messages/:id */}
        <Route path="/messages/:id" component={Message} />
      </Route>
    </Route>
  </Router>
), document.body)

我們現在的 URL 對應關系如下

提醒：絕對路徑可能在動態路由中無法使用

Redirect 重定向

{/* 跳轉 /inbox/messages/:id 到 /messages/:id */}
<Redirect from="messages/:id" to="/messages/:id" />

react-router