首页  >  文章  >  web前端  >  react 4.0 路由怎么跳转

react 4.0 路由怎么跳转

藏色散人
藏色散人原创
2023-01-06 09:50:031551浏览

react4.0路由跳转的方法:1、通过“npm install history --save”安装“history”;2、在要跳转的地方对应的js文件中,引入createHashHistory并执行代码“import { createHashHistory } from 'history'createHashHistory().push('/share')”即可。

react 4.0 路由怎么跳转

本教程操作环境:Windows10系统、React-Router v4.0版、Dell G3电脑。

react 4.0 路由怎么跳转?

React-Router v4.0 hashRouter使用js跳转

React-Router v4.0上已经不推荐使用hashRouter,主推browserRouter,但是因为使用browserRouter需要服务端配合可能造成不便,有时还是需要用到hashRouter。

下面是v4.0的React-Router中hashRouter以js方式跳转的实现步骤。

v4.0剥离了history,所以要操作history,需要安装支持包:

npm install history --save

在要跳转的地方对应的js文件中,引入createHashHistory并执行代码,以跳转到'/share'举例:

import { createHashHistory } from 'history'
createHashHistory().push('/share')

已经ok了。

在使用上述方法跳转之前,需要确认已经定义Router,可参考下述代码:

import { HashRouter as Router, Route, Switch } from 'react-router-dom'
...
<Router>
  <App>
    <Switch>
      <Route path=&#39;/index&#39; component={显示的组件1}>
      <Route path=&#39;/share&#39; component={显示的组件2}>
      ...
    </Switch>
  </App>
</Router>

推荐学习:《react视频教程

以上是react 4.0 路由怎么跳转的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn