Heim > Artikel > Web-Frontend > 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:
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!