réagir-router4.0 implémente la redirection et les fonctions 404

Cette fois, je vous propose React-Router4.0 pour implémenter la redirection et les fonctions 404. Quelles sont les précautions pour que React-router4.0 implémente la redirection et les fonctions 404 Ce qui suit est un cas pratique, jetons un coup d'œil ?

En développement, la redirection et 404 sont des besoins très courants. En utilisant React-router4.0, vous pouvez utiliser Redirect pour la redirection

. La solution la plus couramment utilisée consiste à accéder automatiquement à la page d'accueil après la connexion de l'utilisateur.

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;

L'exemple ci-dessus utilise et conserve uniquement l'état de connexion comme état du composant. Dans le développement réel, si l'état de connexion doit être utilisé globalement, vous devrez peut-être envisager d'utiliser redux et d'autres bibliothèques de gestion de l'état des données. pratique pour nous de gérer les données. Ce qui doit être noté ici, c'est que la méthode de connexion traditionnelle utilise des cookies pour stocker des sessionID désordonnés et complexes, etc., pour stocker les informations de l'utilisateur. Si des jetons sont utilisés, les informations de l'utilisateur peuvent être renvoyées à ce moment-là. vous pouvez envisager d'utiliser sessionStorage et localStorage pour stocker les informations utilisateur (y compris l'avatar, le nom d'utilisateur, etc. À ce stade, lors de l'écriture du réducteur, vous devez spécifier l'état initial à obtenir du stockage, tel que :

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;

Spécifier la

page 404 est également très simple. Il vous suffit d'utiliser Route à la fin du système de routage pour spécifier le composant de la page 404

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

. Lorsque tous les chemins spécifiés par la route ne correspondent pas, le composant NoMatch sera chargé, qui est la page 404

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez faire attention aux autres articles connexes sur le site Web PHP chinois !

Lecture recommandée :

Explication détaillée des étapes d'utilisation des objets prototypes js

Explication détaillée des étapes de configuration styles d'éléments en js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!