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>
)
}
}
效果：
二、路由模式
之前帶#號的路由模式為哈西模式，如果想不帶#號的話，可以寫成如下：
但是BrowserRouter沒有#路徑，后端如果沒有對應(yīng)的路徑處理邏輯，就會404。
三、withRouter
如果我們在我的頁面里面還有我的訂單路由的話，那么在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>
)
}
可以看到報錯了，那我們之前那種寫法不生效了嗎。其實跟路由的創(chuàng)建有關(guān)系，之前是直接將組件用component屬性直接傳了過去，所以props有history對象，但是這次我們是采用的render將組件在立即函數(shù)中實例化了，不傳進去：
所以在這里props接收不到任何東西，是非常正常的。在使用render的路由時，我們可以這樣傳參：
通過傳props那么子組件中將有路由的一些屬性，就可以做跳轉(zhuǎn)。如果在路由組件上不傳props的話，那么將使用withRouter進行跳轉(zhuǎn)。將props刪除：
可以看到即使render的路由父組件不傳props，我們使用withRouter，也能夠進行路由的跳轉(zhuǎn)。
以上就是React路由攔截模式及withRouter示例詳解的詳細內(nèi)容，更多關(guān)于React路由攔截模式withRouter的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要為大家介紹了React可定制黑暗模式切換開關(guān)組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
在Create React App中使用CSS Modules的方法示例
本文介紹了如何在 Create React App 腳手架中使用 CSS Modules 的兩種方式。有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。2019-01-01
React?正確使用useCallback?useMemo的方式
這篇文章主要介紹了React?正確使用useCallback?useMemo的方式，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的朋友可以參考一下2022-08-08
react+antd select下拉框?qū)崿F(xiàn)模糊搜索匹配的示例代碼
我們在開發(fā)過程中，經(jīng)常會出現(xiàn)下拉框數(shù)據(jù)很多得情況，本文主要介紹了react+antd select下拉框?qū)崿F(xiàn)模糊搜索匹配的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-01-01
ReactNative?狀態(tài)管理redux使用詳解
這篇文章主要介紹了ReactNative?狀態(tài)管理redux使用詳解2023-03-03
React Native中TabBarIOS的簡單使用方法示例
最近在學習過程中遇到了很多問題,TabBarIOS的使用就是一個，所以下面這篇文章主要給大家介紹了關(guān)于React Native中TabBarIOS簡單使用的相關(guān)資料，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考下。2017-10-10
詳解使用webpack+electron+reactJs開發(fā)windows桌面應(yīng)用
這篇文章主要介紹了詳解使用webpack+electron+reactJs開發(fā)windows桌面應(yīng)用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
vite?+?react?+typescript?環(huán)境搭建小白入門教程
這篇文章主要介紹了vite?+?react?+typescript?環(huán)境搭建小白入門教程,本文通過示例圖文相結(jié)合給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12
這篇文章主要介紹了詳解React 的幾種條件渲染以及選擇，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
這篇文章主要為大家詳細介紹了React實現(xiàn)評論的添加和刪除，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10