react-router v4 使用 history 控制路由跳转
来源:互联网 发布:淘宝外观专利权投诉 编辑:程序博客网 时间:2024/06/05 00:13
问题
当我们使用react-router v3的时候,我们想跳转路由,我们一般这样处理
我们从react-router导出browserHistory。
我们使用browserHistory.push()等等方法操作路由跳转。
类似下面这样
import browserHistory from 'react-router';export function addProduct(props) { return dispatch => axios.post(`xxx`, props, config) .then(response => { browserHistory.push('/cart'); //这里 });}
问题来了,在react-router v4中,不提供browserHistory等的导出~~
那怎么办?我如何控制路由跳转呢???
解决方法
- 使用 withRouter
withRouter高阶组件,提供了history让你使用~
import React from "react";import {withRouter} from "react-router-dom";class MyComponent extends React.Component { ... myFunction() { this.props.history.push("/some/Path"); } ...}export default withRouter(MyComponent);
这是官方推荐做法哦。但是这种方法用起来有点难受,比如我们想在redux里面使用路由的时候,我们只能在组件把history传递过去。。
就像问题章节的代码那种场景使用,我们就必须从组件中传一个history参数过去。。。
- 使用 Context
react-router v4 在 Router 组件中通过Contex暴露了一个router对象~
在子组件中使用Context,我们可以获得router对象,如下面例子~
import React from "react";import PropTypes from "prop-types";class MyComponent extends React.Component { static contextTypes = { router: PropTypes.object } constructor(props, context) { super(props, context); } ... myFunction() { this.context.router.history.push("/some/Path"); } ...}
当然,这种方法慎用~尽量不用。因为react不推荐使用contex哦。在未来版本中有可能被抛弃哦。
- hack
其实分析问题所在,就是v3中把我们传递给Router组件的history又暴露出来,让我们调用了
而react-router v4 的组件BrowserRouter自己创建了history,
并且不暴露出来,不让我们引用了。尴尬~
我们可以不使用推荐的BrowserRouter,依旧使用Router组件。我们自己创建history,其他地方调用自己创建的history。看代码~
我们自己创建一个history
// src/history.jsimport createHistory from 'history/createBrowserHistory';export default createHistory();
我们使用Router组件
// src/index.jsimport { Router, Link, Route } from 'react-router-dom';import history from './history';ReactDOM.render( <Provider store={store}> <Router history={history}> ... </Router> </Provider>, document.getElementById('root'),);
其他地方我们就可以这样用了
import history from './history';export function addProduct(props) { return dispatch => axios.post(`xxx`, props, config) .then(response => { history.push('/cart'); //这里 });}
- 我非要用BrowserRouter
确实,react-router v4推荐使用BrowserRouter组件,而在第三个解决方案中,我们抛弃了这个组件,又回退使用了Router组件。
你去看看BrowserRouter的源码,我觉得你就豁然开朗了。
- react-router v4 使用 history 控制路由跳转
- react-router JS 控制路由跳转
- react-router 路由控制页面跳转
- react-router V4 版本不能嵌套路由的问题
- react入门之路由----react-router的跳转问题
- react-router 中的history
- react-router v4
- React Router v4
- 使用react-router-dom优雅的实现页面(路由)跳转, 而且保持当前页面状态
- 前端路由&react-router使用姿势
- React-router路由实践
- React-router路由实践
- react-router路由
- React-router路由实践
- react-router 路由匹配
- react-router 路由
- 使用react router V4(react-router-dom)遇到的一些问题
- React Router v4 版本学习指南
- 学习心得
- 低车速下,扭矩如何增加
- jQuery选择器
- 写给我的JAVA工程师之路-数据表操作
- Agisoft PhotoScan Pro 1.4.0.5076 Win64 1CD
- react-router v4 使用 history 控制路由跳转
- Android系统级开发进程清理功能的一些记录和发现(二)
- Monasca安装配置指导(2/3)
- 前端数据传到后台动态生成Excel文件并提供文件下载
- C#中一些文件的操作
- vue全局自定义指令和局部自定义指令
- 使用机器学习算法打造一个简单的“微博指数”
- ios 中的基本算数函数
- 织梦跳转移动站点