react-router
阿新 • • 發佈:2017-08-10
ops 默認 首頁 ide class logs inbox tin uid
路由配置
我們來通過一個簡單的例子解釋一下如何編寫路由配置。
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