react-router4

react-router 有dom和native两种版本但是使用方法一致
安装npm install react-router-dom --save
react-router五个常用组件{BrowserRouter,Link,Route,Redirect,Switch}

·BrowserRouter用于最外层容器&只需要书写一次&内部只能有一个子元素所以这里用了一个div
·Link类似于a标签 to属性类似于href
·Route是路由 path是路径 component对应要渲染的react组件
·exact是精确匹配路由如果不加exact的话/2会同时渲染/和/2的内容
·Switch从上到下匹配到一个则执行并跳出
·Redirect是网页重定向
·path='/:location'可以将this.props.match.params,location属性赋值当前path根目录后的路由

Demo

function page2(){
　　return (<h2>page2</h2>)
}

class Text extends React.Component {
　　render() {
　　　　return <h2>{this.props.match.params.location}</h2>
　　}
}

<Provider store = {store}>
　　<BrowserRouter>
　　　　<div>
　　　　　　<Link to='/'>page1</Link>
　　　　　　<Link to='/2'>page2</Link>
　　　　　　 <Switch>
　　　　　　　　<Route path='/' component={App} exact></Route>
　　　　　　　　<Route path='/2' component={page2}></Route>
　　　　　　　　<Redirect to='/'></Redirect>
 　　　　　　　　<Route path='/:location' component={Text}></Route>
　　　　　　</Switch>
　　　　</div>
　　</BrowserRouter>
</Provider>