React路由攔截模式及withRouter示例詳解
一、路由攔截
在前面兩篇 路由博客基礎(chǔ)上，我們將ReactRouter.js的我的profile路由設(shè)置成路由攔截的：
<Route path="/profile" render={() =>
isAuth() ? <Profile/> : <Redirect to="/login"></Redirect>
}></Route>
新建Login.js組件，寫入代碼：
import React, { Component } from 'react'
export default class Login extends Component {
render() {
return (
<div>
<h2>Login</h2>
<input type="text"></input>
<button onClick={() => {
localStorage.setItem('token', 123 )
this.props.history.push('/profile')
}}>模擬登錄</button>
</div>
)
}
}
效果：
二、路由模式
之前帶#號(hào)的路由模式為哈西模式，如果想不帶#號(hào)的話，可以寫成如下：
但是BrowserRouter沒有#路徑，后端如果沒有對(duì)應(yīng)的路徑處理邏輯，就會(huì)404。
三、withRouter
如果我們?cè)谖业捻撁胬锩孢€有我的訂單路由的話，那么在Profile.js中寫入跳轉(zhuǎn)的語法：
import React from 'react'
export default function Profile(props) {
return (
<div>
<h1>Profile</h1>
<div onClick={() => {
props.history.push('/profileorder')
}}>我的訂單</div>
</div>
)
}
可以看到報(bào)錯(cuò)了，那我們之前那種寫法不生效了嗎。其實(shí)跟路由的創(chuàng)建有關(guān)系，之前是直接將組件用component屬性直接傳了過去，所以props有history對(duì)象，但是這次我們是采用的render將組件在立即函數(shù)中實(shí)例化了，不傳進(jìn)去：
所以在這里props接收不到任何東西，是非常正常的。在使用render的路由時(shí)，我們可以這樣傳參：
通過傳props那么子組件中將有路由的一些屬性，就可以做跳轉(zhuǎn)。如果在路由組件上不傳props的話，那么將使用withRouter進(jìn)行跳轉(zhuǎn)。將props刪除：
可以看到即使render的路由父組件不傳props，我們使用withRouter，也能夠進(jìn)行路由的跳轉(zhuǎn)。
以上就是React路由攔截模式及withRouter示例詳解的詳細(xì)內(nèi)容，更多關(guān)于React路由攔截模式withRouter的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
React css-in-js基礎(chǔ)介紹與應(yīng)用
隨著React、Vue等支持組件化的MVVM前端框架越來越流行，在js中直接編寫css的技術(shù)方案也越來越被大家所接受。為什么前端開發(fā)者們更青睞于這些css-in-js的方案呢，下面帶你了解它2022-09-09
react同構(gòu)實(shí)踐之實(shí)現(xiàn)自己的同構(gòu)模板
這篇文章主要介紹了react同構(gòu)實(shí)踐之實(shí)現(xiàn)自己的同構(gòu)模板，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
React文件名和目錄規(guī)范最佳實(shí)踐記錄(總結(jié)篇)
React在使用時(shí)非常靈活，如果沒有一個(gè)規(guī)范約束項(xiàng)目，在開發(fā)過程中會(huì)非?；靵y，本文將介紹幾個(gè)優(yōu)秀的規(guī)范，介紹文件名和目錄前，需要先簡(jiǎn)述一下幾種通用的類型，用來區(qū)分文件的功能，感興趣的朋友一起看看吧2022-05-05
解決React報(bào)錯(cuò)Functions are not valid as
這篇文章主要為大家介紹了React報(bào)錯(cuò)Functions are not valid as a React child解決詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
基于React.js實(shí)現(xiàn)兔兔牌九宮格翻牌抽獎(jiǎng)組件
這篇文章主要為大家詳細(xì)介紹了如何基于React.js實(shí)現(xiàn)兔兔牌九宮格翻牌抽獎(jiǎng)組件，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解一下2023-01-01
react項(xiàng)目如何運(yùn)行在微信公眾號(hào)
這篇文章主要介紹了react項(xiàng)目如何運(yùn)行在微信公眾號(hào)，幫助大家更好的理解和學(xué)習(xí)使用react，感興趣的朋友可以了解下2021-04-04
React+Node實(shí)現(xiàn)大文件分片上傳、斷點(diǎn)續(xù)傳秒傳思路
本文主要介紹了React+Node實(shí)現(xiàn)大文件分片上傳、斷點(diǎn)續(xù)傳秒傳思路，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
這篇文章主要介紹了React中關(guān)于render()的用法及說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
簡(jiǎn)易的redux?createStore手寫實(shí)現(xiàn)示例
這篇文章主要介紹了簡(jiǎn)易的redux?createStore手寫實(shí)現(xiàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
React中jquery引用的實(shí)現(xiàn)方法
這篇文章主要介紹了React中jquery引用的實(shí)現(xiàn)方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09