详解前端路由实现与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，狼蚁网站SEO优化简单介绍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属性指定路由的匹配规则,看狼蚁网站SEO优化例子
<Route path="inbox" component={Inbox}>
<Route path="messages/:id" component={Message} />
</Route>
上面代码中，当用户访问/inbox/messages/:id时，会加载狼蚁网站SEO优化的组件。
<Inbox> <Message/> </Inbox>
IndexRoute 组件
类似index.html ,默认加载组件，狼蚁网站SEO优化代码默认加载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 *