安装
$ npm install --save react-router-dom
单独定义路由文件
import React, { Component } from 'react';
import { Switch, Route } from 'react-router-dom'
// 视图
import Index from '../view/index/index'
import User from '../view/user/user'
import Maps from '../view/map/map'
import Photo from '../view/photo/photo'
class Routes extends Component {
render() {
return (
<Switch>
<Route exact path="/" component={Index} />
<Route exact path="/map" component={Maps} />
<Route exact path="/user" component={User} />
<Route exact path="/photo" component={Photo} />
</Switch>
)
}
}
export default Routes;
使用时直接引入
import { BrowserRouter as Router } from 'react-router-dom'
import Routes from './route/route'
<Router>
<Layouts>
<Contents>
<Routes />
</Contents>
<Footers>
<Foot />
</Footers>
</Layouts>
</Router>
这样引入的话，视图只会刷新Contents部分，Footers部分不会刷新。
使用js跳转时，需要用withRouter把这个组件包起来，这样props里才有history等属性
import { withRouter, Link } from 'react-router-dom'
this.props.history.push('/user')
// 高阶组件中的withRouter,
// 作用是将一个组件包裹进Route里面,
// 然后react-router的三个对象history, location, match就会被放进这个组件的props属性中.
export default withRouter(Foot)
