码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2019-06-03 00:14:29      阅读:974      评论:0      收藏:0      [点我收藏+]

标签:reac   dir   页面跳转   方法   配置   none   control   erro   browser   

上次用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‘);
...

 

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

标签:reac   dir   页面跳转   方法   配置   none   control   erro   browser   

原文地址:https://www.cnblogs.com/tianmiaogongzuoshi/p/10965062.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!