react-router路由跳转,react-router5.x 的配置及其页面跳转方法和js跳转方法

https://blog.csdn.net/sinat_37255207/article/details/90745207

上次用react-router 的时候  还是3.x 很久不用 已经到react-router5.x 了  

废话不多说 上代码

配置

react: ^16.8.6,

react-dom: ^16.8.6,

react-router: ^5.0.0,

react-router-dom: ^5.0.0,

路由配置

用HashRouter还是BrowserRouter 自己来定 两者区别 两种路由的区别

import { HashRouter,BrowserRouter, Route, Link, Switch } from "react-router-dom";
 
....
//用HashRouter还是BrowserRouter 自己来定
<BrowserRouter>
          <Link to="/a" style={{color:'black'}}>
              <div>点击跳转到a</div>
              </Link>
              <Link to="/b" style={{color:'black'}}>
              <div>点击跳转到b</div>
              </Link>
            　　<Switch>
                <Route exact path='/' component={App1}/>
                
                <Route path='/a' component={App1}/>
                <Route path='/b' component={App2}/>
　　　　　　　　　　<Switch/>
　　　　　　  </BrowserRouter> ....

 

路由组件 js路由跳转

?

1 2 3 4 5 6 7 8 9 10 11 12 13

//路由组件 js路由跳转    constructor(props){         super(props);           } //有history记录跳转 this.props.history.push('/register'); //无history记录跳转 this.props.history.replace('/register'); //返回 this.props.history.goBack();

一般组件withRouer  js路由跳转

?

1 2 3 4 5 6 7 8 9 10 11 12 13

import { withRouer } from "react-router-dom";    class Demo extends React.PureComponent {     ...     //暴露时加了高阶组件withRouer ,这样一般组件内部才能操作this.props.history     demo1=()=>{                   this.props.history.push('/**');     } }    //withRouer高阶组件 必须 export default withRouer(Demo);

　　

 

 

 

拓展 https://www.jianshu.com/p/336770af0047

 

 

 

 

BrowserRouter 详细X

  没有英汉互译结果
  请尝试网页搜索