使用react-router4.0實(shí)現(xiàn)重定向和404功能的方法
在開(kāi)發(fā)中,重定向和404這種需求非常常見(jiàn),使用React-router4.0可以使用Redirect進(jìn)行重定向
最常用的就是用戶(hù)登錄之后自動(dòng)跳轉(zhuǎn)主頁(yè)。
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 ( <div> <input type="text" value={this.state.value} onChange={this.handleChange} /> <a onClick={() => { this.toLogin(this.state.value) }}>登錄</a> </div> ) } } export default Login;
以上這個(gè)示例僅僅是將登錄的狀態(tài)作為組件的state使用和維護(hù)的,在實(shí)際開(kāi)發(fā)中,是否登錄的狀態(tài)應(yīng)該是全局使用的,因此這時(shí)候可能你會(huì)需要考慮使用redux等這些數(shù)據(jù)狀態(tài)管理庫(kù),方便我們做數(shù)據(jù)的管理。這里需要注意的使用傳統(tǒng)的登錄方式使用cookie存儲(chǔ)無(wú)序且復(fù)雜的sessionID之類(lèi)的來(lái)儲(chǔ)存用戶(hù)的信息,使用token的話(huà),返回的可能是用戶(hù)信息,此時(shí)可以考慮使用sessionStorage、localStorage來(lái)儲(chǔ)存用戶(hù)信息(包括頭像、用戶(hù)名等),此時(shí)書(shū)寫(xiě)reducer時(shí)需要指定初始狀態(tài)從存儲(chǔ)中獲取,如:
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頁(yè)面也非常簡(jiǎn)單,只需要在路由系統(tǒng)最后使用Route指定404頁(yè)面的component即可
<Switch> <Route path="/" exact component={Home}/> <Route path="/user" component={User}/> <Route component={NoMatch}/> </Switch>
當(dāng)路由指定的所有路徑?jīng)]有匹配時(shí),就會(huì)加載這個(gè)NoMatch組件,也就是404頁(yè)面
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 詳解React中傳入組件的props改變時(shí)更新組件的幾種實(shí)現(xiàn)方法
- VSCode配置react開(kāi)發(fā)環(huán)境的步驟
- react-redux中connect的裝飾器用法@connect詳解
- ReactNative 之FlatList使用及踩坑封裝總結(jié)
- React Native實(shí)現(xiàn)簡(jiǎn)單的登錄功能(推薦)
- ReactNative之鍵盤(pán)Keyboard的彈出與消失示例
- react-router browserHistory刷新頁(yè)面404問(wèn)題解決方法
- 詳解React Native開(kāi)源時(shí)間日期選擇器組件(react-native-datetime)
- react中使用swiper的具體方法
- React useMemo和useCallback的使用場(chǎng)景
相關(guān)文章
解決React初始化加載組件會(huì)渲染兩次的問(wèn)題
這篇文章主要介紹了解決React初始化加載組件會(huì)渲染兩次的問(wèn)題,文中有出現(xiàn)這種現(xiàn)象的原因及解決方法,感興趣的同學(xué)跟著小編一起來(lái)看看吧2023-08-08React中使用Workbox進(jìn)行預(yù)緩存的實(shí)現(xiàn)代碼
Workbox是Google Chrome團(tuán)隊(duì)推出的一套 PWA 的解決方案,這套解決方案當(dāng)中包含了核心庫(kù)和構(gòu)建工具,因此我們可以利用Workbox實(shí)現(xiàn)Service Worker的快速開(kāi)發(fā),本文小編給大家介紹了React中使用Workbox進(jìn)行預(yù)緩存的實(shí)現(xiàn),需要的朋友可以參考下2023-11-11React videojs 實(shí)現(xiàn)自定義組件(視頻畫(huà)質(zhì)/清晰度切換) 的操作代碼
最近使用videojs作為視頻處理第三方庫(kù),用來(lái)對(duì)接m3u8視頻類(lèi)型,這里總結(jié)一下自定義組件遇到的問(wèn)題及實(shí)現(xiàn),感興趣的朋友跟隨小編一起看看吧2023-08-08React從react-router路由上做登陸驗(yàn)證控制的方法
本篇文章主要介紹了React從react-router路由上做登陸驗(yàn)證控制的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05可定制React自動(dòng)完成搜索組件Turnstone實(shí)現(xiàn)示例
這篇文章主要為大家介紹了可定制React自動(dòng)完成搜索組件Turnstone實(shí)現(xiàn)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10一文學(xué)會(huì)使用Remix寫(xiě)API接口
這篇文章主要為大家介紹了一文學(xué)會(huì)Remix寫(xiě)API接口實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04react+antd 遞歸實(shí)現(xiàn)樹(shù)狀目錄操作
這篇文章主要介紹了react+antd 遞歸實(shí)現(xiàn)樹(shù)狀目錄操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11