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

Question

一般用链接

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

然后

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

点击来跳转。

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

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

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

谢谢

Answer 1

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处理路由啦，不知道我解释清楚没

Answer 2

history.pushState() 不起作用的原因是这个js语法只改变地址栏和向浏览器存入一个路由记录，你需要自己监听onhashchange事件的变化去做处理。对于你的问题可以考虑一哈去解决UI显示问题，比如调整样式什么的

Answer 3

用hashHistory.push({pathname="/home",query: {'这里面是传递的参数，对象'}});

Answer 4

使用 useHistory

import { useHistory } from 'react-router';

const history = useHistory();

history.push('/xxx');
history.replace('/xxx');