javascript - Wie man Redirect in Version 5 von react-router-dom von Reactjs verwendet

Ich benutze die letzte Version des react-router-Moduls, namens react-router-dom, das zum Standard beim Entwickeln von Webanwendungen mit React geworden ist. Ich möchte wissen, wie man eine Weiterleitung nach einer POST-Anfrage macht. Ich habe diesen Code geschrieben, aber nach der Anfrage passiert nichts. Ich habe im Internet recherchiert, aber alle Daten betreffen frühere Versionen des react-router und nicht das letzte 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;

Antwort #1

Sie müssen setState verwenden, um eine Eigenschaft festzulegen, die das <Redirect> innerhalb Ihrer render()-Methode rendert.

z. B.

class MyComponent extends React.Component {
  state = {
    redirect: false
  }

  handleSubmit () {
    axios.post(/**/)
      .then(() => this.setState({ redirect: true }));
  }

  render () {
    const { redirect } = this.state;

     if (redirect) {
       return <Redirect to='/somewhere'/>;
     }

     return <RenderYourForm/>;
}

Sie können auch ein Beispiel in der offiziellen Dokumentation sehen: https://reacttraining.com/react-router/web/example/auth-workflow

Das gesagt, würde ich vorschlagen, dass du den API-Aufruf in einen Service oder etwas Ähnliches einfügst. Dann könntest du einfach das history-Objekt verwenden, um programmatisch zu routen. So funktioniert die Integration mit Redux.

Aber ich schätze, du hast deine Gründe, es auf diese Weise zu tun.

Antwort #2

Hier ein kleines Beispiel als Antwort auf den Titel, da alle erwähnten Beispiele meiner Meinung nach kompliziert sind, ebenso wie das offizielle.

Sie sollten wissen, wie man es2015 transpiliert und wie man Ihren Server in die Lage versetzt, die Umleitung zu verarbeiten. Hier ist ein Snippet für Express. Weitere Informationen hierzu finden Sie hier.

Stellen Sie sicher, dass Sie dies unter allen anderen Routen platzieren.

const app = express();
app.use(express.static('distApp'));

/**
 * Enable routing with React.
 */
app.get('*', (req, res) => {
  res.sendFile(path.resolve('distApp', 'index.html'));
});

Dies ist die .jsx-Datei. Beachten Sie, wie der längste Pfad zuerst kommt und allgemeiner wird. Für die allgemeinsten Routen verwenden Sie das exact-Attribut.

// Relative imports
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom';

// Absolute imports
import YourReactComp from './YourReactComp.jsx';

const root = document.getElementById('root');

const MainPage= () => (
  <div>Main Page</div>
);

const EditPage= () => (
  <div>Edit Page</div>
);

const NoMatch = () => (
  <p>No Match</p>
);

const RoutedApp = () => (
  <BrowserRouter >
    <Switch>
      <Route path="/items/:id" component={EditPage} />
      <Route exact path="/items" component={MainPage} />          
      <Route path="/yourReactComp" component={YourReactComp} />
      <Route exact path="/" render={() => (<Redirect to="/items" />)} />          
      <Route path="*" component={NoMatch} />          
    </Switch>
  </BrowserRouter>
);

ReactDOM.render(<RoutedApp />, root); 

Antwort #3

React Router v5 ermöglicht es Ihnen jetzt, einfach mit history.push() weiterzuleiten, dank des useHistory()-Hooks:

import { useHistory } from "react-router-dom"

function HomeButton() {
  let history = useHistory()

  function handleClick() {
    history.push("/home")
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  )
}

Antwort #4

Rufen Sie es einfach in einer beliebigen Funktion auf, die Sie möchten.

this.props.history.push('/main');