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

发布时间：2020-12-15 16:20:41 所属栏目：百科来源：网络整理

导读：上次用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, ? import {HashRouter as Router,Route,Link,BrowserRouter,Switc

上次用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,

import {HashRouter as Router,Route,Link,BrowserRouter,Switch,Redirect} from ‘react-router-dom‘;
 
....
<Router>
          <Link to="/a" style={{color:‘black‘}}>
              <div>点击跳转到a</div>
              </Link>
              <Link to="/b" style={{color:‘black‘}}>
              <div>点击跳转到b</div>
              </Link>
            
                <Route exact path=‘/‘ component={App1}/>
                
                <Route path=‘/a‘ component={App1}/>
                <Route path=‘/b‘ component={App2}/>
            
        </Router>

js 跳转方法

import { createHashHistory,createBrowserHistory } from ‘history‘; // 是hash路由 history路由 自己根据需求来定
 
const history = createHashHistory();
 
...
 history.push(‘/a‘);
...

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!