• 技术文章 >web前端 >前端问答

    react 4.0 路由怎么跳转

    藏色散人藏色散人2023-01-06 09:50:03原创49

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

    本教程操作环境: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中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:react-router
    上一篇:react怎么实现点击隐藏显示 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • react 多个页面之间跳转怎么实现• react 表格怎么增加• react 装饰器报错怎么办• 深入详解React中的ref• react刷新找不到页面怎么办
    1/1

    PHP中文网