本篇文章主要介紹了詳解前端路由和react-router使用姿勢，詳細的介紹了react-router的用法，有興趣的可以了解一下
路由
對於有SPA開發經驗的人來說，路由這個名詞並不陌生，前端的路由和後端的路由在實現技術上不一樣，但是原理都是一樣的。在 HTML5 的 history API 出現之前，前端的路由都是透過 hash 來實現的，hash 可以相容於低版本的瀏覽器。它的 URI 規則中需要帶上 #。 Web 服務不會解析hash，也就是說# 後的內容Web 服務都會自動忽略，但是JavaScript 是可以透過window.location.hash 讀取到的，讀取到路徑加以解析之後就可以回應不同路徑的邏輯處理。
簡單介紹AngularJs UI-Router路由
如果你有過AngularJS開發經驗，#並不陌生，angularjs有自己官方實現的路由體系，也有比較具代表性的第三方巢狀路由機制UI-Router; 如下程式碼區塊所示：
.state("main.list",angularAMD.route({
url : '/list/:params',//url &参数
views : {
"header@main" : angularAMD.route({
templateUrl : 'simple/view/main/html/main/Header.html',
controller:'HeadController',
controllerUrl:[ ****.js
]
}),
"menu@main" : angularAMD.route({
templateUrl : 'simple/view/main/html/main/MenuModule.html',
controller : "MenuController",
controllerUrl:[ ****.js]
}),
"mainContent@main":angularAMD.route({
templateUrl : 'simple/view/main/html/main/MainContent.html'
})
}
}))state()函數的第一個參數就是路由，「main.list」 是一個巢狀路由機制，當頁面跳到「main.list」路由下時會先載入state(「main」,*)下的模組及其資源（html,js等），隨後載入state（”main.list”）下的模組和資源（html,js等），實作路由嵌套；
react-router
-先上一段程式碼
<Router history={ hashHistory }>
<Route path='/' component={CoreLayout}>
<IndexRoute component={HomeView}/>
<Route path=”/HODE_ROUTE/:param“ component={HomeView}/>
<Route path=“ /AUDIT_ROUTE/:param" component={AuditView}/>
<Route path=“/CHART_ROUTE” component={ChartView}/>
</Route>
</Router>React-router以jsx語法類似DOM結構的形式實作router嵌套；與AngularJs 的UI-Router看起來差異很大，實則思想雷同；
Angular的實作邏輯：
跳轉=》state=》module=》靜態資源（js，css， html）=》show（頁面展示）
react-router的實作邏輯：
跳轉=》path=》component=》靜態資源（js，css ，html）=》show（頁面展示）
本文主要講react-router，以下簡單介紹react-router的使用姿勢：
react-router常用元件入門
在巢狀路由
<Router history={hashHistory}>
<Route path="/" component={App}>
<Route path="/repos" component={Repos}/>
<Route path="/about" component={About}/>
</Route>
</Router>在上方程式碼中，使用者造訪/repos時，會先載入App元件，然後在它的內部再載入Repos元件。
<App> <Repos/> </App>
子路由也可以不寫在Router元件裡面，單獨傳入Router元件的routes屬性
let routes = <Route path="/" component={App}>
<Route path="/repos" component={Repos}/>
<Route path="/about" component={About}/>
</Route>;
<Router routes={routes} history={browserHistory}/>path 屬性
Route元件的path屬性指定路由的符合規則,看下面範例
<Route path="inbox" component={Inbox}>
<Route path="messages/:id" component={Message} />
</Route>上面程式碼中，當使用者存取/inbox/messages/:id時，就會載入下面的元件。
<Inbox> <Message/> </Inbox>
IndexRoute 元件
類似index.html ,預設載入元件，下面程式碼預設載入home元件
<Router>
<Route path="/" component={App}>
<IndexRoute component={Home}/>
<Route path="accounts" component={Accounts}/>
<Route path="statements" component={Statements}/>
</Route>
</Router>現在，使用者存取/的時候，載入的元件結構如下。
<App> <Home/> </App>
Redirect 元件
#Redirect元件用於路由的跳轉，也就是使用者存取一個路由，會自動跳到另一個路由。
<Route path="inbox" component={Inbox}>
{/* 从 /inbox/messages/:id 跳转到 /messages/:id */}
＜Redirect from="messages/:id" to="/messages/:id" />
</Route>現在存取/inbox/messages/5，會自動跳到/messages/5。
Link
Link元件用於取代a標籤，產生一個鏈接，允許使用者點擊後跳到另一個路由。它基本上就是a標籤的React 版本，可以接收Router的狀態。
表單處理
Link元件用於正常的使用者點擊跳轉，但有時還需要表單跳轉、點擊按鈕跳轉等動作。這些情況要怎麼跟React Router對接呢？
第一種方法是使用browserHistory.push
handleSubmit(event) {
event.preventDefault()
const userName = event.target.elements[0].value
const repo = event.target.elements[1].value
const path = `/repos/${userName}/${repo}`
browserHistory.push(path)
}${userName} 一種後端語言常用的表達式寫法，可在字串中取變數
handleSubmit(event) {
// ...
this.context.router.push(path)
},第二種方法是使用context物件。
export default React.createClass({
// ask for `router` from context
contextTypes: {
router: React.PropTypes.object
},
handleSubmit(event) {
// ...
this.context.router.push(path)
},
})多人合作開發router檔案管理
一般一個專案都會有一個統一的router文件，相當於一個router池，不同的請求，請求router池中所匹配的路徑，載入請求所需頁面。 but 。 。 。 每個開發者開發一個元件都會需要設定路由，會導致router檔案不易管理，容易導致衝突，甚至故障。 so。 。 ，也許，可能可以每個組件資料夾下對於一個XXX.router 文件，前端程式碼打包上傳到線上時觸發某個鉤子函數，將XXX.router文件統一合併到中央router文件中，從而避免多人操作router文件。
以上是前端路由實作react-router的使用方法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
