在React项目外部获取路由组件实例

import {Route, BrowserRouter as Router, HashRouter, BrowserRouter} from "react-router-dom";

let router = new Router();

通过as指定别名可以让router对象获取不同的路由方式。
不过这种方式存在这样的问题:

  • 使用HashRouter时,可以new一个新的Router(HashRouter)实例
  • 使用BrowserRouter时,不可以新new一个,只能使用渲染的组件中的Router组件实例,否则history push的不是同一个栈

使用ref获取组件实例

	// 通过ref
    ReactDOM.render((
        <Provider store={store}>
            <Router ref={ref => router = ref}>
                <Route path="/react/robot/a" component={Test1} />
                <Route path="/react/robot/b" component={Test2} />
            </Router>
        </Provider>
    ), node);

这样就可以直接利用router对象在react组件外进行路由了:

router.history.push(path);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值