zoukankan      html  css  js  c++  java
  • react-router v4 使用 history 控制路由跳转

    问题

    当我们使用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.js

    
    import createHistory from 'history/createBrowserHistory';
    
    export default createHistory(); 

    新的版本需要这样引入

    import { createHashHistory,createBrowserHistory } from 'history'; // 是hash路由 history路由 自己根据需求来定

      

    ts引入

    import * as createHistory from "history";
    export default createHistory.createBrowserHistory();
    

      

     我们使用Router组件

    // src/index.js
    
    import { 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'); //这里
          });
    }
    
    this.props.history.push("/two")
    

      

    react-router v4推荐使用BrowserRouter组件,而在第三个解决方案中,我们抛弃了这个组件,又回退使用了Router组件。

    我目前也没有更好的办法了

  • 相关阅读:
    【华为云技术分享】40行代码教你利用Python网络爬虫批量抓取小视频
    【华为云技术分享】【Python成长之路】机器学习:10+分类算法汇总学习
    【华为云技术分享】漫谈LiteOS之开发板-中断(基于GD32450i-EVAL)
    【华为云技术分享】多模态融合算法——Multimodal Compact Bilinear Pooling
    【Java_基础】HashMap的工作原理
    【前端_js】jQuery动态设置元素的样式
    【前端_React】npm常用命令
    【前端_React】Node.js和webpack的安装
    【Java框架】Postman的使用
    【前端_js】javascript中数组的map()方法
  • 原文地址:https://www.cnblogs.com/muamaker/p/9663470.html
Copyright © 2011-2022 走看看