最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

關(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)知識都是你復(fù)制我的,我復(fù)制你的,都特么垃圾。只能去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)文章

  • mobx在react hooks中的應(yīng)用方式

    mobx在react hooks中的應(yīng)用方式

    這篇文章主要介紹了mobx在react hooks中的應(yīng)用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • React類組件和函數(shù)組件對比-Hooks的簡介

    React類組件和函數(shù)組件對比-Hooks的簡介

    Hook?是?React?16.8?的新增特性,它可以讓我們在不編寫class的情況下,?使用state以及其他的React特性(比如生命周期,這篇文章主要介紹了React類組件和函數(shù)組件對比-Hooks的介紹及初體驗,需要的朋友可以參考下
    2022-11-11
  • React?Hooks?實現(xiàn)的中文輸入組件

    React?Hooks?實現(xiàn)的中文輸入組件

    這篇文章主要為大家介紹了React?Hooks實現(xiàn)的中文輸入組件示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-05-05
  • React如何實現(xiàn)像Vue一樣將css和js寫在同一文件

    React如何實現(xiàn)像Vue一樣將css和js寫在同一文件

    這篇文章主要介紹了React如何實現(xiàn)像Vue一樣將css和js寫在同一文件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-01-01
  • React+echarts?(echarts-for-react)?實現(xiàn)中國地圖及省份切換功能

    React+echarts?(echarts-for-react)?實現(xiàn)中國地圖及省份切換功能

    這篇文章主要介紹了React+echarts?(echarts-for-react)?畫中國地圖及省份切換,有足夠的地圖數(shù)據(jù),可以點擊到街道,示例我只出到市級,本文結(jié)合實例代碼給大家介紹的非常詳細需要的朋友可以參考下
    2022-11-11
  • 使用react-native-doc-viewer實現(xiàn)文檔預(yù)覽

    使用react-native-doc-viewer實現(xiàn)文檔預(yù)覽

    這篇文章主要介紹了使用react-native-doc-viewer實現(xiàn)文檔預(yù)覽,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • react?context優(yōu)化四重奏教程示例

    react?context優(yōu)化四重奏教程示例

    這篇文章主要為大家介紹了react?context優(yōu)化四重奏教程示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-10-10
  • 詳解React?如何防止?XSS?攻擊論$$typeof?的作用

    詳解React?如何防止?XSS?攻擊論$$typeof?的作用

    這篇文章主要介紹了詳解React?如何防止?XSS?攻擊論$$typeof?的作用,文章圍繞主題展開詳細的內(nèi)容介紹,具有一定的參考價值,需要的小伙伴可以參考一下
    2022-07-07
  • 一文搞懂redux在react中的初步用法

    一文搞懂redux在react中的初步用法

    Redux是JavaScript狀態(tài)容器,提供可預(yù)測化的狀態(tài)管理,今天通過本文給大家分享redux在react中使用及配置redux到react項目中的方法,感興趣的朋友跟隨小編一起看看吧
    2021-06-06
  • React?Hooks useReducer?逃避deps組件渲染次數(shù)增加陷阱

    React?Hooks useReducer?逃避deps組件渲染次數(shù)增加陷阱

    這篇文章主要介紹了React?Hooks?之?useReducer?逃避deps后增加組件渲染次數(shù)的陷阱詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-09-09

最新評論

明溪县| 南漳县| 枞阳县| 宝应县| 新营市| 宝兴县| 阿尔山市| 定陶县| 宁蒗| 江山市| 水城县| 繁峙县| 阜南县| 三门峡市| 和田市| 永胜县| 博野县| 文成县| 惠来县| 金塔县| 玛沁县| 磐石市| 利辛县| 浦东新区| 福建省| 上栗县| 瓦房店市| 嘉定区| 济宁市| 延津县| 宁波市| 宣化县| 民权县| 修武县| 玉屏| 珲春市| 张家界市| 徐闻县| 杂多县| 河津市| 威远县|