Ich versuche herauszufinden, wie ich zur vorherigen Seite zurückkehren kann. ich benutze[react-router-v4][1]
Dies ist der Code, den ich auf meiner ersten Zielseite konfiguriert habe:
<Router>
<div>
<Link to="/"><div className="routerStyle"><Glyphicon glyph="home" /></div></Link>
<Route exact path="/" component={Page1}/>
<Route path="/Page2" component={Page2}/>
<Route path="/Page3" component={Page3}/>
</div>
</Router>
Um zu den folgenden Seiten weiterzuleiten, mache ich einfach:
this.props.history.push('/Page2');
Wie kann ich jedoch zur vorherigen Seite zurückkehren? Versuchte einige Dinge wie unten erwähnt, aber kein Glück: 1.this.props.history.goBack();
Gibt Fehler:
TypeError: null ist kein Objekt (Auswertung von 'this.props')
this.context.router.goBack();
Gibt Fehler:
TypeError: null ist kein Objekt (Auswertung von 'this.context')
this.props.history.push('/');
Gibt Fehler:
TypeError: null ist kein Objekt (Auswertung von 'this.props')
Den Page1
Code hier unten posten :
import React, {Component} from 'react';
import {Button} from 'react-bootstrap';
class Page1 extends Component {
constructor(props) {
super(props);
this.handleNext = this.handleNext.bind(this);
}
handleNext() {
this.props.history.push('/page2');
}
handleBack() {
this.props.history.push('/');
}
/*
* Main render method of this class
*/
render() {
return (
<div>
{/* some component code */}
<div className="navigationButtonsLeft">
<Button onClick={this.handleBack} bsStyle="success">< Back</Button>
</div>
<div className="navigationButtonsRight">
<Button onClick={this.handleNext} bsStyle="success">Next ></Button>
</div>
</div>
);
}
export default Page1;
javascript
reactjs
react-router-v4
Akshay Lokur
quelle
quelle
this.props.history.goBack();
github.com/ReactTraining/react-router/blob/…Antworten:
Ich denke, das Problem liegt in der Bindung:
constructor(props){ super(props); this.goBack = this.goBack.bind(this); // i think you are missing this } goBack(){ this.props.history.goBack(); } ..... <button onClick={this.goBack}>Go Back</button>
Wie ich angenommen habe, bevor Sie den Code gepostet haben:
constructor(props) { super(props); this.handleNext = this.handleNext.bind(this); this.handleBack = this.handleBack.bind(this); // you are missing this line }
quelle
componentDidUpdate
undwindow.onpopstate
?this.props.history.goBack();
Dies ist die richtige Lösung für React-Router v4
Aber eine Sache, die Sie beachten sollten, ist, dass Sie sicherstellen müssen, dass this.props.history existiert.
Das heißt, Sie müssen diese Funktion
this.props.history.goBack();
innerhalb der Komponente aufrufen , die von <Route /> umschlossen wirdWenn Sie diese Funktion in einer Komponente aufrufen, die sich tiefer im Komponentenbaum befindet, funktioniert sie nicht.
BEARBEITEN:
Wenn Sie ein Verlaufsobjekt in der Komponente haben möchten, die sich tiefer im Komponentenbaum befindet (der nicht von <Route> umschlossen wird), können Sie Folgendes tun:
... import {withRouter} from 'react-router-dom'; class Demo extends Component { ... // Inside this you can use this.props.history.goBack(); } export default withRouter(Demo);
quelle
Zur Verwendung mit React Router v4 und einer Funktionskomponente an einer beliebigen Stelle im Dom-Tree.
import React from 'react'; import { withRouter } from 'react-router-dom'; const GoBack = ({ history }) => <img src="./images/back.png" onClick={() => history.goBack()} alt="Go back" />; export default withRouter(GoBack);
quelle
Jede Antwort hier enthält Teile der Gesamtlösung. Hier ist die Komplettlösung, mit der ich es in Komponenten eingesetzt habe, die tiefer liegen als dort, wo Route verwendet wurde:
import React, { Component } from 'react' import { withRouter } from 'react-router-dom'
^ Sie benötigen diese zweite Zeile, um die Funktion zu importieren und die Komponente am Ende der Seite zu exportieren.
render() { return ( ... <div onClick={() => this.props.history.goBack()}>GO BACK</div> ) }
^ Benötigte die Pfeilfunktion vs einfach onClick = {this.props.history.goBack ()}
export default withRouter(MyPage)
^ Umschließen Sie den Namen Ihrer Komponente mit 'withRouter ()'
quelle
Können Sie den Code angeben, in dem Sie ihn verwenden
this.props.history.push('/Page2');
?Haben Sie die Methode goBack () ausprobiert?
this.props.history.goBack();
Es ist hier aufgelistet https://reacttraining.com/react-router/web/api/history
Mit einem Live-Beispiel hier https://reacttraining.com/react-router/web/example/modal-gallery
quelle
this.props.history.push('/Page2');
? Wennthis.props
dort nicht null ist, sollte es funktionieren.Hier ist die sauberste und einfachste Möglichkeit, mit diesem Problem umzugehen, wodurch auch die wahrscheinlichen Fallstricke der
this keyword
. Verwenden Sie Funktionskomponenten:import { withRouter } from "react-router-dom";
Wickeln Sie Ihrecomponent
oder besserApp.js
mit dem,withRouter()
HOC
was machthistory
, um "App-weit" verfügbar zu sein. Wenn Sie Ihre Komponente einwickeln, haben Sie nur diehistory available for that specific
Wahl, welche Komponente Sie haben.Also hast du:
export default withRouter(App);
In einer Redux-Umgebung
export default withRouter( connect(mapStateToProps, { <!-- your action creators -->})(App), );
sollten Sie aufhistory
diese Weise sogar Benutzer von Ihren Aktionserstellern verwenden können.in Ihrem
component
tun Sie Folgendes:import {useHistory} from react-router-dom;
const history = useHistory(); // do this inside the component
goBack = () => history.goBack();
<btn btn-sm btn-primary onclick={goBack}>Go Back</btn>
export default DemoComponent;
Gottcha
useHistory
wird nur aus der neuesten Version 5.1 exportiert.react-router-dom
Aktualisieren Sie daher unbedingt das Paket. Sie sollten sich jedoch keine Sorgen machen müssen. über die vielen Haken derthis keyword
.Sie können dies auch zu einer wiederverwendbaren Komponente machen, die Sie in Ihrer App verwenden können.
function BackButton({ children }) { let history = useHistory() return ( <button type="button" onClick={() => history.goBack()}> {children} </button> ) }``` Cheers.
quelle
Versuchen:
this.props.router.goBack()
quelle
Einfach benutzen
<span onClick={() => this.props.history.goBack()}>Back</span>
quelle
Hoffe das hilft jemandem:
import React from 'react'; import * as History from 'history'; import { withRouter } from 'react-router-dom'; interface Props { history: History; } @withRouter export default class YourComponent extends React.PureComponent<Props> { private onBackClick = (event: React.MouseEvent): void => { const { history } = this.props; history.goBack(); }; ...
quelle
Vielleicht kann das jemandem helfen.
Ich habe die
history.replace()
Umleitung verwendet. Als ich versuchte, sie zu verwendenhistory.goBack()
, wurde ich vor der Seite, mit der ich gearbeitet habe, zur vorherigen Seite gesendet. Also habe ich die Methode geänderthistory.replace()
,history.push()
damit der Verlauf gespeichert werden kann und ich zurückkehren kann.quelle
Ich bin mir nicht sicher, ob jemand anderes auf dieses Problem gestoßen ist oder dies möglicherweise sehen muss. Aber ich habe ungefähr 3 Stunden damit verbracht, dieses Problem zu lösen:
Ich wollte ein einfaches goBack () auf Knopfdruck implementieren. Ich dachte, ich hätte einen guten Start hingelegt, weil meine App.js bereits im Router enthalten war und ich {BrowserRouter als Router} aus 'react-router-dom' importierte. ... Da ich mit dem Router-Element das Verlaufsobjekt bewerten kann.
Ex:
import React from 'react'; import './App.css'; import Splash from './components/Splash'; import Header from './components/Header.js'; import Footer from './components/Footer'; import Info from './components/Info'; import Timer from './components/Timer'; import Options from './components/Options'; import { BrowserRouter as Router, Route } from 'react-router-dom'; function App() { return ( <Router> <Header /> <Route path='/' component={Splash} exact /> <Route path='/home' component={Info} exact /> <Route path='/timer' component={Timer} exact /> <Route path='/options' component={Options} exact /> <Footer /> </Router> ); } export default App;
ABER das Problem war auf meinem Nav-Modul (einer untergeordneten Komponente), ich musste '{withRouter} von' react-router-dom 'importieren;' und erzwingen Sie dann einen Export mit:
export default withRouter(Nav);
Ex:
import React from 'react'; import { withRouter } from 'react-router-dom'; class Nav extends React.Component { render() { return ( <div> <label htmlFor='back'></label> <button id='back' onClick={ () => this.props.history.goBack() }>Back</button> <label htmlFor='logOut'></label> <button id='logOut' ><a href='./'>Log-Out</a> </button> </div> ); } } export default withRouter(Nav);
Zusammenfassend wurde withRouter aufgrund eines bekannten Problems in React erstellt, bei dem in bestimmten Szenarien, in denen die Vererbung von einem Router abgelehnt wird, ein erzwungener Export erforderlich ist.
quelle