react-router4.0 implements redirection and 404 functions

brings you react-router4.0 to implement redirection and 404 functions. What are the precautions for react-router4.0 to implement redirection and 404 functions? The following is a practical case, let’s take a look.

In development, redirection and 404 are very common needs. Using React-router4.0, you can use Redirect for redirection

The most commonly used one is to automatically jump to the homepage after the user logs in.

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;

The above example only uses and maintains the login state as the state of the component. In actual development, whether the login state should be used globally, so at this time you may need to consider using redux and other data state management libraries. It is convenient for us to manage data. What needs to be noted here is that the traditional login method uses cookies to store unordered and complex sessionID and the like to store user information. If tokens are used, user information may be returned. At this time, you can consider using sessionStorage and localStorage are used to store user information (including avatar, user name, etc.). At this time, when writing the reducer, you need to specify the initial state to obtain from the storage, such as:

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;

Specifying the 404 page is also very simple. You only need to use Route at the end of the routing system to specify the component of the 404 page

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

When all the paths specified by the route do not match, the NoMatch component will be loaded, which is the 404 page

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Detailed explanation of the steps for using js prototype objects

Detailed explanation of the steps for setting element styles in js

The above is the detailed content of react-router4.0 implements redirection and 404 functions. For more information, please follow other related articles on the PHP Chinese website!