Gründe, warum auf den v4-Verlauf nicht zugegriffen werden kann

Dieser Artikel stellt Ihnen hauptsächlich die Lösung für das Problem vor, dass auf den Verlauf von React-Router/React-Router-Dom v4 nicht zugegriffen werden kann Arbeit. Werte, Freunde in Not kommen und lernen gemeinsam.

Vorwort

Bei der Verwendung von React-Router-Dom verwendet die Unterkomponente this.props. Ich habe mir die offizielle Dokumentation nicht angesehen und konnte sie lange nicht finden, da ich nach Abschluss der asynchronen Ausführung auf die Seite springe. Was soll ich tun? Häusliches Wissen ist von mir kopiert, ich habe deins kopiert, das ist alles Blödsinn. Ich kann nur zu Google gehen und

endlich die Antwort gefunden haben: (siehe den Code auf einen Blick)

Lösung

Zuerst Router verwenden

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>
 );
 };
}

Dann die Geschichte der Verwendung von Unterkomponenten

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>
 );
 };
}

Schauen wir uns diesen Kontext an:

Das Obige habe ich für alle zusammengestellt. Ja, ich hoffe, es wird in Zukunft für alle hilfreich sein.

Verwandte Artikel:

Wie verwende ich node.js und andere Technologien, um die Anmelde- und Registrierungsfunktion zu implementieren?

So verwenden Sie Filter in Vue

Probleme bei der Textvermeidung in Front-End-Algorithmen (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonGründe, warum auf den v4-Verlauf nicht zugegriffen werden kann. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!