v4 기록에 액세스할 수 없는 이유

이 글에서는 주로 React-router/react-router-dom v4 히스토리에 접근할 수 없는 문제에 대한 해결책을 소개하고 있으며, 이는 모든 사람의 학습이나 업무에 일정한 참고 학습 가치를 가지고 있습니다. 필요하신 친구들은 오셔서 함께 공부해주세요.

머리말

최근에 업그레이드된 React-router-dom을 사용할 때 this.props.history를 사용하는 하위 구성 요소를 찾을 수 없습니다. , 비동기 실행이 완료된 후 페이지로 이동하기 때문에 푸시 또는 교체를 사용해야 합니다. 국내 지식은 당신이 내 것을 복사한다는 것입니다. 쓰레기. 구글만 가도 되는데

드디어 답을 찾았습니다: (코드를 한눈에 보기)

Solution

라우터를 먼저 사용해 보세요

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';
// 这是按需加载，对于现在讨论的问题没有影响
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>
 );
 };
}

그 다음 하위 구성 요소의 기록을 사용해 보세요

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 (
  <p>
  <button onClick={this.test}>按钮</button>
  </p>
 );
 };
}

살펴보겠습니다. this.context :

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 여러분에게 도움이 되기를 바랍니다.

관련 기사:

node.js 및 기타 기술을 사용하여 로그인 및 등록 기능을 구현하는 방법은 무엇입니까?

vue에서 필터를 사용하는 방법

프런트엔드 알고리즘의 텍스트 회피와 관련된 문제(자세한 튜토리얼)

위 내용은 v4 기록에 액세스할 수 없는 이유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!