- 安装
npm install react-router-dom --save - 引用
import {BrowserRouter as Router,Route,Link} from 'react-router-dom' - 路由
render((
<Router >
<div>
<Route exact path='/' component={Index}/>
<Route path='/Course' component={Course}/>
<Route path='/User' component={User}/>
</div>
</Router >
), document.getElementById('root'));
*注意，<Router >下一级仅能包含一个元素，所以需要用div括一下
- 导航
const MenuLink = ({ label, to, activeOnlyWhenExact }) => (
<Route path={to} exact={activeOnlyWhenExact} children={({ match }) => (
<div>
<Link to={to}>{label}</Link>
</div>
)}/>
)
render() {
return (
<footer>
<MenuLink to='/' label='首页' />
<MenuLink to='/Course' label='课程'/>
<MenuLink to='/User' label='我的'/>
</footer>
);
}
- Push
App.contextTypes = {
router:React.PropTypes.object
}
class App extends Component {
linkTo(){
const { history } = this.context.router
history.push('/User')
/*带参数
history.push('/User',{'id':id})
//接收this.props.location.state.id
*/
}
render() {
return (
<div onClick={this.linkTo.bind(this)}>
</div>
);
}
}
6.HashRouter
browserHistory需要服务端配置，因为真实URL其实是指向服务器资源，比如我们经常使用的API接口，也是一个真实URL的资源路径，当通过真实URL访问网站的时候，第一次访问的是网站的域名，这个时候可以正常加载我们的网站js等文件，而用户手动刷新网页时，由于路径是指向服务器的真实路径，服务器端没有做路由配置，就会导致资源不存在，用户访问的资源不存在，返回给用户的是404错误。通过hashHistory来生成的URL就不会出现这样的问题，因为他不是指向真实的路由。
import {HashRouter as Router,Route ,Switch, Redirect} from 'react-router-dom';
render((
<Router >
<Switch>
<Route path='/Login' component={Login}/>
<Route path='/Course' component={Course}/>
<Route path='/User' component={User}/>
<Route exact path='/Mine/UserInfo' component={UserInfo}/>
<Route exact path='/Mine/UserInfo/Set' component={SetValue}/>
<Redirect from='/' to='/Index'/>
</Switch>
</Router >
), document.getElementById('root'));
App.contextTypes = {
router:React.PropTypes.object
}
class App extends Component {
linkTo(){
const { history } = this.context.router
history.goBack()
或history.replace('/index')
或history.push('/User')
/*带参数
history.push({
pathname: '/Detail',
search: '?id=' + 1,
})
接收：import queryString from 'query-string'；
const parsed = queryString.parse(this.props.location.search);
this.setState({
sort: parsed.sort
})
*/
}
render() {
return (
<div onClick={this.linkTo.bind(this)}>
</div>
);
}
}
