百度直接搜react路由的资料比较少，建议直接上github，头部就是docs链接了
文档虽然是英文的，但是很清楚，就算用谷歌直接翻译都很清晰（因为主要是代码，没啥文字）
docs ： https://reacttraining.com/react-router/web/example/url-params
路由
安装完脚手架，在*App.js*稍作修改
引入路由
import {
BrowserRouter as Router,
Route,
Link
} from 'react-router-dom'
修改<App />
<Router>
<div>
<h2>这是react-router渲染出来的</h2>
<Route path="/:id" component={Child}/>
</div>
</Router>
可以看出来，router竟然是组件格式，很棒的设计。
添加页面
Child
const Child = ({ match }) => (
<div>
<h3>ID: {match.params.id}</h3>
</div>
)
组件component 竟然是函数
ok，看效果
关于路由的精确定位问题
比如 我要访问 / 但是如果直接写
<Route path="/" component={Home} />
访问 / 的时候是没有问题的，但是访问二级（以及更高）的路由，会发现，多了Home的渲染。比如访问 My
home页面也出来了，这时候给 / 添加 exact 就可以了
<Route exact path="/" component={Home} />
页面导入
Code
import React from 'react'
var title = 'Home Page'
export default class Repos extends React.Component {
render() {
return (
<div>
<h1>{title}</h1>
</div>
)
}
}
大概这个格式，引入
import Home from './home'
然后就给component了
<Route exact path="/" component={Home} />
NavLink 转跳
一般都是用 Link,使用方法一样，引入就可以用了
不过NavLink更灵活（顾名思义，在Nav中使用），就介绍它
先引入
import { NavLink } from 'react-router-dom'
然后使用，Code
import { NavLink } from 'react-router-dom'
var activeNavStyle = {
color: 'red'
}
var FootComponent = React.createClass({
render: function() {
return (
<div>
<NavLink to="/" exact activeStyle={activeNavStyle}>首页</NavLink>
<NavLink to="/my" activeStyle={activeNavStyle}>我的</NavLink>
</div>
)
}
})
activeStyle 是处于当前路由的时候展示的样式，还有一个Api是 activeClassName
这里用了 exact 是为了精确匹配当前的位置
除了exact 还有strict 他是在精确匹配，并且后面还有 / 的时候才被执行
还有一个isActive的API，当路由被激活的时候，会执行这个函数
isActive = { (match, location)={console.log('劳资被激活了')} }
<br />
组件
创建组件
var component = React.createClass({
render: function() {
return <h1>come on！</h1>
}
})
使用
不需要像vue 或者 angular 一样需要在声明，只要在同一个作用域下（同一个js文件下），直接导入
<!-- 后面记得加标签结束标记 / -->
<component />
创建Js组件
NavLink 为例子（下面的二大金刚）
import React, { Component } from 'react'
import {
BrowserRouter as Router,
Route
} from 'react-router-dom'
import { NavLink } from 'react-router-dom'
var activeNavStyle = {
color: 'red'
}
class Foot extends Component {
render() {
return (
<div>
<NavLink to="/" exact activeStyle={activeNavStyle}>首页</NavLink>
<NavLink to="/my" activeStyle={activeNavStyle}>我的</NavLink>
</div>
)
}
}
export default Foot;
导入
import Foot from './components/foot'
效果(修改了下样式，可能跟上面的代码不大一样）
Tips： JSX里面 class的写法是 calssName
<div className="foot"></div>
注释的话是
{/**/}
OK ,好了。
参考链接： https://reacttraining.com/react-router/web/api/NavLink/activeClassName-string
--end--
