So verwenden Sie Redirect in Version 5 von React-Router-Dom von Reactjs

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 durchführt. Ich habe diesen Code erstellt, aber nach der Anfrage passiert nichts. Ich überprüfe im Internet, aber alle Daten beziehen sich auf frühere Versionen des Reaktionsrouters und nicht auf 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="https://stackoverflow.com/"/> // 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;

Mit React Router v5 können Sie jetzt einfach mit history.push() umleiten, dank der useHistory()-Hook:

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

Hier ein kleines Beispiel als Antwort auf den Titel, da alle genannten Beispiele meiner Meinung nach ebenso kompliziert sind 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 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, dass der längste Pfad zuerst kommt und allgemeiner wird. Verwenden Sie für die allgemeinsten Routen das exakte 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="https://stackoverflow.com/" render={() => (<Redirect to="/items" />)} />          
      <Route path="*" component={NoMatch} />          
    </Switch>
  </BrowserRouter>
);

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

HINWEIS: Beantworten Sie nur den Titel der Frage

Vorherige Version

<Redirect from="/old-url" to="/new-url" />

Letzte Version

<Route path="/old-url" element={<Navigate to="/new-url" />} />

Hallo, wenn Sie React-Router v-6.0.0-beta oder V6 in dieser Version verwenden, leiten Sie Änderungen so an Navigieren um

Importieren Sie {Navigieren} aus ‘React-Router-Dom’; // so RICHTIG in v6 import { Redirect } from ‘react-router-dom’; // so RICHTIG in v5

import { Redirect } from ‘react-router-dom’; // so FALSCH in v6 // Dies gibt dir einen Fehler in V6 von React-Router und React-Router dom

Bitte stellen Sie sicher, dass Sie beide dieselbe Version in package.json { “react-router”: “^6.0.0-beta.0”, //Like this “react-router-dom”: “^6.0.0-beta.0 “, // so was }

Die oben genannten Dinge funktionieren nur in React Router Version 6 gut