欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

關(guān)于react-router/react-router-dom v4 history不能訪問問題的解決

 更新時間：2018年01月08日 13:44:09   作者：zhanglearning  
這篇文章主要給大家介紹了關(guān)于react-router/react-router-dom v4 history不能訪問問題的解決方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧。

前言

最近把react-router 升級了一下， 在使用react-router-dom 是，子組件使用this.props.history  找不到了，看看官方文檔，找了半天也沒找到，因為我是在異步執(zhí)行完后才跳轉(zhuǎn)頁面，需要用到push 或者replace，怎么辦啊，國內(nèi)知識都是你復制我的，我復制你的，都特么垃圾。只能去Google，

最終找到了答案：（看代碼一目了然）

解決方法

首先使用router

import React, { Component } from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import { Provider } from 'mobx-react';
import stores from '../store/index';
import Bundle from '../components/bundle';
import Hello from 'bundle-loader?lazy!../components/hello.jsx';
// 這是按需加載，對于現(xiàn)在討論的問題沒有影響
const HelloAPP = () => (
 <Bundle load={Hello}>
  {(Hello) => <Hello />}
 </Bundle>
);
export default class App extends Component {
 constructor(props) {
 super(props);
 }
 render() {
 return (
  <Provider { ...stores }>
  <BrowserRouter basename="/">
   <Route path="/" component={HelloAPP}/>
  </BrowserRouter>
  </Provider>
 );
 };
}

接著是子組件的使用history

import React, { Component } from 'react';
// 需要這步，你要npm 這個，
import PropTypes from 'prop-types';
export default class Hello extends Component {
 constructor(props) {
 super(props);
 }
 // 這一步是重點
 static contextTypes = {
 router: PropTypes.object.isRequired
 };
 test = () => {
 console.log(this.context);
 setTimeout(() => {
  this.context.router.history.push("/otherPath");
 }, 1000);
 };
 render() {
 return (
  <div>
  <button onClick={this.test}>按鈕</button>
  </div>
 );
 };
}

讓我們看看this.context :

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

相關(guān)文章

  • React Native 資源包拆分實戰(zhàn)分析

    React Native 資源包拆分實戰(zhàn)分析

    這篇文章主要為大家介紹了React Native 資源包拆分實戰(zhàn)分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-08-08
  • React.js組件實現(xiàn)拖拽排序組件功能過程解析

    React.js組件實現(xiàn)拖拽排序組件功能過程解析

    這篇文章主要介紹了React.js組件實現(xiàn)拖拽排序組件功能過程解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2020-04-04
  • React解析html 標簽的方法

    React解析html 標簽的方法

    在React中,解析HTML標簽通常是使用JSX（JavaScript XML）語法的一部分,這篇文章主要介紹了React 用來解析html 標簽的方法,本文通過示例代碼給大家介紹的非常詳細,需要的朋友可以參考下
    2023-08-08
  • React開啟代理的2種實用方式

    React開啟代理的2種實用方式

    最近有不少伙伴詢問react的代理配置,自己也去試驗了一下發(fā)現(xiàn)不少的問題,在這就將所遇到的心得分享出來,這篇文章主要給大家介紹了關(guān)于React開啟代理的2種實用方式的相關(guān)資料,需要的朋友可以參考下
    2021-07-07
  • 詳解React 元素渲染

    詳解React 元素渲染

    這篇文章主要介紹了React 元素渲染的相關(guān)資料，文中示例代碼非常詳細，幫助大家更好的理解和學習，感興趣的朋友可以了解下
    2020-07-07
  • 深入掌握 react的 setState的工作機制

    深入掌握 react的 setState的工作機制

    本篇文章主要介紹了深入掌握 react的 setState的工作機制，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-09-09
  • React?Context詳解使用方法

    React?Context詳解使用方法

    Context提供了一個無需為每層組件手動添加props，就能在組件樹間進行數(shù)據(jù)傳遞的方法。在一個典型的?React?應用中，數(shù)據(jù)是通過props屬性自上而下（由父及子）進行傳遞的，但這種做法對于某些類型的屬性而言是極其繁瑣的
    2022-12-12
  • React?SSR?中的限流案例詳解

    React?SSR?中的限流案例詳解

    這篇文章主要介紹了React?SSR?之限流,React SSR 畢竟涉及到了服務端，有很多服務端特有的問題需要考慮，而限流就是其中之一，本文會通過一個簡單的案例來說明，為什么服務端需要進行限流，需要的朋友可以參考下
    2022-07-07
  • React如何利用Antd的Form組件實現(xiàn)表單功能詳解

    React如何利用Antd的Form組件實現(xiàn)表單功能詳解

    這篇文章主要給大家介紹了關(guān)于React如何利用Antd的Form組件實現(xiàn)表單功能的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2021-04-04
  • 五分鐘教你了解一下react路由知識

    五分鐘教你了解一下react路由知識

    本文主要介紹了react路由知識，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2021-09-09

最新評論