React-Router4.0 implementiert Umleitungs- und 404-Funktionen

Dieses Mal bringe ich Ihnen React-Router4.0, um Umleitungs- und 404-Funktionen zu implementieren. Was sind die Vorsichtsmaßnahmen für React-Router 4.0, um Umleitungs- und 404-Funktionen zu implementieren? Das Folgende ist ein praktischer Fall, schauen wir uns das an.

In der Entwicklung sind Umleitung und 404 sehr häufige Anforderungen. Mit React-router 4.0 können Sie Redirect für die Umleitung verwenden

Die am häufigsten verwendete Methode besteht darin, nach der Anmeldung des Benutzers automatisch zur Startseite zu springen.

import React, { Component } from 'react';
import axios from 'axios';
import { Redirect } from 'react-router-dom';
class Login extends Component{
 constructor(){
  super();
  this.state = {value: '', logined: false};
  this.handleChange = this.handleChange.bind(this);
  this.toLogin = this.toLogin.bind(this);
 }
 handleChange(event) {
  this.setState({value: event.target.value})
 }
 toLogin(accesstoken) {
  axios.post('yoururl',{accesstoken})
   .then((res) => {
    this.setState({logined: true});
   })
 }
 render() {
  if(this.props.logined) {
   return (
    <Redirect to="/user"/>
   )
  }
  return (
   <p>
     <input type="text" value={this.state.value} onChange={this.handleChange} />
     <a onClick={() => { this.toLogin(this.state.value) }}>登录</a>
   </p>
  )
 }
}
export default Login;

Das obige Beispiel verwendet und verwaltet nur den Anmeldestatus als Status der Komponente. In der tatsächlichen Entwicklung muss der Anmeldestatus global verwendet werden. Daher müssen Sie zu diesem Zeitpunkt möglicherweise die Verwendung von Redux und anderen Datenstatusverwaltungsbibliotheken in Betracht ziehen bequem für uns, Daten zu verwalten. Hierbei ist zu beachten, dass die herkömmliche Anmeldemethode Cookies zum Speichern ungeordneter und komplexer Sitzungs-Benutzerinformationen verwendet. Wenn Token verwendet werden, können zu diesem Zeitpunkt Benutzerinformationen zurückgegeben werden. Sie können die Verwendung von sessionStorage und localStorage zum Speichern von Benutzerinformationen (einschließlich Avatar, Benutzername usw.) in Betracht ziehen. Zu diesem Zeitpunkt müssen Sie beim Schreiben des Reduzierers den Anfangsstatus angeben, der aus dem Speicher abgerufen werden soll, z. B.

const LOGIN_SUCCESS = 'LOGIN_SUCCESS';
const LOGIN_FAILED = 'LOGIN_FAILED';
const LOGINOUT = 'LOGINOUT';
const Login = function(state, action) {
 if(!state) {
  console.log('state');
  if(sessionStorage.getItem('usermsg')) {
   return {
    logined: true,
    usermsg: JSON.parse(sessionStorage.getItem('usermsg'))
   }
  }
  return {
   logined: false,
   usermsg: {}
  }
 }
 switch(action.type) {
  case LOGIN_SUCCESS:
   return {logined: true,usermsg: action.usermsg};
  case LOGIN_FAILED:
   return {logined: false,usermsg:{}};
  case LOGINOUT:
   return {logined: false, usermsg: {}};
  default:
   return state
 }
};
export default Login;

Die Angabe der 404-Seite ist ebenfalls sehr einfach. Sie müssen lediglich Route am Ende des Routing-Systems verwenden, um die Komponente der 404-Seite

<Switch>
 <Route path="/" exact component={Home}/>
 <Route path="/user" component={User}/>
 <Route component={NoMatch}/>
</Switch>

anzugeben Wenn nicht alle durch die Route angegebenen Pfade übereinstimmen, wird die NoMatch-Komponente geladen, bei der es sich um die 404-Seite handelt.

Ich glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie hier. Bitte beachten Sie andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Schritte zur Verwendung von js-Prototypobjekten

Detaillierte Erläuterung der Schritte zur Einstellung Elementstile in js

Das obige ist der detaillierte Inhalt vonReact-Router4.0 implementiert Umleitungs- und 404-Funktionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!