01、react-router使用

1、下载react-router-dom

npm install react-router-dom -save 或者

yarn add react-router-dom

2、在项目初始进入的页面index.js引用

import {BrowserRouter as Router, Route,Link,NavLink,Switch}from 'react-router-dom';

3、使用跳转,当然使用前先引入你需要跳转的组件

  这样就能实现页面的跳转了

使用react-router跳转页面的方式 目前只使用过两种

1、router组件会自己暴露在context方法,所以直接在组件里面引入context类型检查

先引入该方法

News.contextTypes = {

    router: PropTypes.object.isRequired,

};

使用的是 

this.context.router.history.push({pathname:'/counter/counter'})


2、使用withRouter,在组件导出的时候用withRouter包裹一下组件

例如:export default withRouter(Counter);

使用就是:this.props.history.goBack() //返回

                this.props.history.push(''/counter/counter')


3、使用hashHistory,浏览器的url是这样的:/#/user/liuna?_k=adseis

4、BrowserRouter,但是此方式需要服务器配合,而且有点不好的是重定向只能到首页,无法停留在当前页,使用browserHistory,浏览器的url是这样的:/user/liuna

你可能感兴趣的:(01、react-router使用)