react-router5.x 的配置及其页面跳转方法和js跳转方法
Posted tianmiaogongzuoshi
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react-router5.x 的配置及其页面跳转方法和js跳转方法相关的知识,希望对你有一定的参考价值。
上次用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跳转方法的主要内容,如果未能解决你的问题,请参考以下文章
React学习及实例开发——用react-router跳转页面
采用react-router,当点击页面跳转时,怎样相应的改变header值