Ich verwende das React-Router-Modul der letzten Version mit dem Namen React-Router-Dom, das bei der Entwicklung von Webanwendungen mit React zum Standard geworden ist. Ich möchte wissen, wie man nach einer POST-Anfrage eine Umleitung vornimmt. Ich habe diesen Code erstellt, aber nach der Anfrage passiert nichts. Ich überprüfe im Web, aber alle Daten beziehen sich auf frühere Versionen des Reaktionsrouters und nein, mit dem letzten Update.
Code:
import React, { PropTypes } from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { Redirect } from 'react-router'
import SignUpForm from '../../register/components/SignUpForm';
import styles from './PagesStyles.css';
import axios from 'axios';
import Footer from '../../shared/components/Footer';
class SignUpPage extends React.Component {
constructor(props) {
super(props);
this.state = {
errors: {},
client: {
userclient: '',
clientname: '',
clientbusinessname: '',
password: '',
confirmPassword: ''
}
};
this.processForm = this.processForm.bind(this);
this.changeClient = this.changeClient.bind(this);
}
changeClient(event) {
const field = event.target.name;
const client = this.state.client;
client[field] = event.target.value;
this.setState({
client
});
}
async processForm(event) {
event.preventDefault();
const userclient = this.state.client.userclient;
const clientname = this.state.client.clientname;
const clientbusinessname = this.state.client.clientbusinessname;
const password = this.state.client.password;
const confirmPassword = this.state.client.confirmPassword;
const formData = { userclient, clientname, clientbusinessname, password, confirmPassword };
axios.post('/signup', formData, { headers: {'Accept': 'application/json'} })
.then((response) => {
this.setState({
errors: {}
});
<Redirect to="/"/> // Here, nothings happens
}).catch((error) => {
const errors = error.response.data.errors ? error.response.data.errors : {};
errors.summary = error.response.data.message;
this.setState({
errors
});
});
}
render() {
return (
<div className={styles.section}>
<div className={styles.container}>
<img src={require('./images/lisa_principal_bg.png')} className={styles.fullImageBackground} />
<SignUpForm
onSubmit={this.processForm}
onChange={this.changeClient}
errors={this.state.errors}
client={this.state.client}
/>
<Footer />
</div>
</div>
);
}
}
export default SignUpPage;
javascript
reactjs
react-router
maoooricio
quelle
quelle
Redirect
Aussehen wie JSX, nicht JS.Antworten:
Sie müssen verwenden
setState
, um eine Eigenschaft festzulegen, die das<Redirect>
Innere Ihrerrender()
Methode rendert.Z.B
Ein Beispiel finden Sie auch in der offiziellen Dokumentation: https://reacttraining.com/react-router/web/example/auth-workflow
Trotzdem würde ich vorschlagen, dass Sie den API-Aufruf in einen Dienst oder etwas anderes einfügen. Dann können Sie das
history
Objekt einfach zum programmgesteuerten Routen verwenden. So funktioniert die Integration mit Redux .Aber ich denke, Sie haben Ihre Gründe, dies so zu tun.
quelle
put the API call inside a service or something
?componentDidMount
. Oder noch besser, erstellen Sie ein HOC , das Ihre API "umschließt".Redirect
rufthistory.replace
. Wenn Sie Zugriff auf dashistory
Objekt wünschen, verwenden SiewithRoutet
/Route
.react-router
> = 5.1 enthält jetzt Hooks, so dass Sie nurconst history = useHistory(); history.push("/myRoute")
Hier ist ein kleines Beispiel als Antwort auf den Titel wie alle genannten Beispiele meiner Meinung nach ebenso kompliziert wie das offizielle.
Sie sollten wissen, wie man es2015 transpiliert und Ihren Server in die Lage versetzt, die Umleitung zu verarbeiten. Hier ist ein Ausschnitt für Express. Weitere Informationen hierzu finden Sie hier .
Stellen Sie sicher, dass dies unter allen anderen Routen steht.
Dies ist die .jsx-Datei. Beachten Sie, wie der längste Pfad zuerst kommt und allgemeiner wird. Verwenden Sie für die allgemeinsten Routen das genaue Attribut.
quelle
home/hello
> haben,home/hello/1
aber dann zu gehenhome/hello
und die Eingabetaste drücken, wird diese beim ersten Mal nicht umgeleitet. irgendwelche Ideen warum?Rufen Sie es einfach in einer beliebigen Funktion auf.
quelle
Mit React Router v5 können Sie jetzt dank des useHistory () - Hooks einfach mit history.push () umleiten :
quelle
Versuchen Sie so etwas.
quelle
Alternativ können Sie verwenden
withRouter
. Sie können den Zugriff auf das bekommenhistory
Eigenschaften des Objekts und die nächstgelegenen<Route>
‚smatch
über diewithRouter
übergeordnete Komponente.withRouter
vergehen aktualisiertmatch
,location
undhistory
Requisiten , um die eingewickelt Komponente , wenn es macht.Oder nur:
quelle
Sie können zu diesem Zweck ein Hoc schreiben und eine Methodenaufrufumleitung schreiben. Hier ist der Code:
quelle
Um zu einer anderen Seite zu navigieren (in meinem Fall Info-Seite), habe ich installiert
prop-types
. Dann importiere ich es in die entsprechende Komponente. Und ich habe verwendetthis.context.router.history.push('/about')
Und habe es Und es wird navigiert.Mein Code ist,
quelle
Um zu einer anderen Komponente zu navigieren, können Sie verwenden
this.props.history.push('/main');
quelle
Warning: Cannot update during an existing state transition (such as within
Rendern). Render methods should be a pure function of props and state.
Die einfachste Lösung, um zu einer anderen Komponente zu navigieren, ist (Beispiel: Navigieren Sie zur E-Mail-Komponente, indem Sie auf das Symbol klicken):
quelle
Alternativ können Sie das bedingte Rendern von React verwenden.
quelle