react 4.0 路由怎么跳转

藏色散人
发布: 2023-01-06 09:50:03
原创
1718人浏览过
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='/index' component={显示的组件1}>
      <Route path='/share' component={显示的组件2}>
      ...
    </Switch>
  </App>
</Router>
登录后复制

推荐学习:《react视频教程

以上就是react 4.0 路由怎么跳转的详细内容,更多请关注php中文网其它相关文章!

路由优化大师
路由优化大师

路由优化大师是一款及简单的路由器设置管理软件,其主要功能是一键设置优化路由、屏广告、防蹭网、路由器全面检测及高级设置等,有需要的小伙伴快来保存下载体验吧!

下载
相关标签:
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号