javascript - react-router 不用 Link 怎么跳转路由？

问题描述

问 题

一般用链接

<Link to="/home ">home</Link>

然后

<Route path="/home" component={Home}/>

点击来跳转。

但我用 <Link/> 包着 UI 组件的话显示会有问题，然后我在我的 UI 组件上的 onChange 方法中用 history.pushState() 发现只是改变了地址栏，但 react-router 的

<Route path="/home" component={Home}/>

并不会起作用，想问下大家，怎么才能不用 <Link/> 让上面的代码起作用？只能模拟点击吗？

谢谢

解决方案

history.pushState的话确实如楼上所说只是在history里面添加一条路由记录，并且改变url,不会刷新页面，所以内容不会变，解决的办法可以用如下代码试试：

    class Test {
        constructor(props, context){
            super(props, context);
            this.router = context.router;
        }
    }
    Test.contextTypes = {
      router: PropTypes.object.isRequired
    };
    
    

在你ui组件的onChange事件里面写如下代码：

     this.router.push(...)

push方法的参数就是你要跳转的路由，为什么上面代码可以办到呢，可以看以https://facebook.github.io/re...这里context的使用，再结合react-router源码中的RouteContext.js文件里getChildContext理解，还有一个重要点是你的组件都被router也就是路由组件包着，所以你任何子组件用contextChild，就可以用context处理路由啦，不知道我解释清楚没

这篇关于javascript - react-router 不用 Link 怎么跳转路由？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！