React-router4.0 はリダイレクトと 404 機能を実装します

今回はリダイレクトと404機能を実装するreact-router4.0をお届けします。 React-router4.0 がリダイレクトと 404 機能を実装するための 注意事項 は何ですか? 以下は実際的なケースです。見てみましょう。

開発において、リダイレクトと 404 は非常に一般的なニーズです。React-router4.0 を使用すると、リダイレクトに Redirect を使用できます

。 最も一般的に使用されるのは、ユーザーのログイン後にホームページに自動的にジャンプすることです。

りー

上記の例では、ログイン状態をコンポーネントの状態として使用および維持するだけです。実際の開発では、ログイン状態をグローバルに使用する必要があるため、現時点では redux などのデータ状態管理ライブラリの使用を検討する必要があるかもしれません。データを管理するのに便利です。ここで注意が必要なのは、従来のログイン方法では、Cookieを使用して無秩序で複雑なセッションIDなどを保存し、トークンを使用する場合には、その際にユーザー情報が返される可能性があることです。 sessionStorage と localStorage。ユーザー情報 (アバター、ユーザー名などを含む) を保存します。リデューサーを作成するときは、

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;

のように、ストレージから取得する初期状態を指定する必要があります。 404 ページ の指定も非常に簡単です。ルーティング システムの最後で Route を使用して 404 ページ

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;

のコンポーネントを指定するだけです。 ルートで指定されたすべてのパスが一致しない場合は、404 ページの NoMatch コンポーネントがロードされます。この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、その他の情報に注目してください。関連記事はPHP中国語サイトにあります！

推奨読書:

js プロトタイプ オブジェクトを使用する手順の詳細な説明

js で要素スタイルを設定する手順の詳細な説明

以上がReact-router4.0 はリダイレクトと 404 機能を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。