React中的路由嵌套和手動(dòng)實(shí)現(xiàn)路由跳轉(zhuǎn)的方式詳解
React的路由嵌套
接上一篇文章, 在上一篇文章中講解了路由的基本介紹, 我再來(lái)介紹一下路由的其他用法
在開(kāi)發(fā)中,路由之間是存在嵌套關(guān)系的。
這里我們假設(shè)Home頁(yè)面中還有兩個(gè)頁(yè)面內(nèi)容:
推薦列表和排行榜列表;
點(diǎn)擊不同的鏈接可以跳轉(zhuǎn)到不同的地方,顯示不同的內(nèi)容;
<Routes> <Route path='/' element={<Navigate to="/home"/>}></Route> {/* 配置二級(jí)路由 */} <Route path='/home' element={<Home/>}> <Route path='/home' element={<Navigate to="/home/recommend"/>}/> <Route path='/home/recommend' element={<HomeRecommend/>}/> <Route path='/home/ranking' element={<HomeRanking/>}/> </Route> <Route path='/about' element={<About/>}/> <Route path='/profile' element={<Profile/>}/> <Route path='*' element={<Notfound/>}/> </Routes>
<Outlet>組件用于在父路由元素中作為子路由的占位元素, 也就是子路由的展示位置(必須寫)。
// home組件 import { Link, Outlet } from 'react-router-dom' export class Home extends PureComponent { render() { return ( <div> <h2>Home</h2> <Link to="/home/recommend">推薦</Link> <Link to="/home/ranking">排行</Link> <Outlet/> </div> ) } }
手動(dòng)路由的跳轉(zhuǎn)
目前我們實(shí)現(xiàn)的跳轉(zhuǎn)主要是通過(guò)Link或者NavLink進(jìn)行跳轉(zhuǎn)的,實(shí)際上我們也可以通JavaScript代碼進(jìn)行跳轉(zhuǎn)。
Link或者NavLink渲染出來(lái)是一個(gè)a元素, 如果我們想點(diǎn)擊一個(gè)button或者其他元素實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn), 就需要通過(guò)JavaScript代碼進(jìn)行跳轉(zhuǎn)了
我們知道Navigate組件是可以進(jìn)行路由的跳轉(zhuǎn)的,但是依然是組件的方式。
如果我們希望通過(guò)JavaScript代碼邏輯進(jìn)行跳轉(zhuǎn)(比如點(diǎn)擊了一個(gè)button),那么就需要獲取到navigate對(duì)象。
在Router6.x版本之后,代碼類的API都遷移到了hooks的寫法:
如果我們希望進(jìn)行代碼跳轉(zhuǎn),需要通過(guò)
useNavigate
的Hook獲取到navigate對(duì)象進(jìn)行操作, hook只能在函數(shù)組件中使用(這里了解一下, 后面文章會(huì)有專門詳細(xì)講解hook的);
那么如果是一個(gè)函數(shù)式組件,我們可以直接調(diào)用它提供的hooks的寫法,但是如果是一個(gè)類組件呢?
- Router6.x確實(shí)是沒(méi)有提供類組件的API, 如果我們確實(shí)想要在類組件中使用, 需要再使用高階組件對(duì)類組件進(jìn)行增強(qiáng)(通過(guò)高階組件增強(qiáng)向類組件中傳入navigate)
- 如果是Router5.x, 是有提供withRouter這樣一個(gè)高階組件的, 但是Router6.x中, 我們需要自己實(shí)現(xiàn)這樣的高階組件
- 封裝高階函數(shù)方法如下, 由于其他地方也可能使用高階組件, 所以我是在一個(gè)單獨(dú)的文件中進(jìn)行封裝
import { useNavigate } from "react-router-dom" // 封裝高階組件 export default function withRouter(WrapperComponent) { return function(props) { // 在函數(shù)組件中通過(guò)hook拿到navigate對(duì)象 const naviagte = useNavigate() // 將獲取到的navigate放到一個(gè)對(duì)象中 const router = {naviagte} return <WrapperComponent {...props} router={router} /> } }
這樣我們引入自己封裝的高階組件, 通過(guò)高階組件的增強(qiáng), 就可以在類組件的props中獲取到navigate
export class App extends PureComponent { navigateTo(path) { // 經(jīng)過(guò)高階組件增強(qiáng)的組件中, 可以在props中拿到navigate const { naviagte } = this.props.router // 調(diào)用navigate naviagte(path) } render() { return ( <div className='app'> <div className='header'> <Link to="/home">首頁(yè)</Link> <Link to="/about">關(guān)于</Link> <Link to="/profile">我的</Link> {/* 發(fā)生點(diǎn)擊事件時(shí), 將路勁傳遞過(guò)去 */} <button onClick={() => this.navigateTo("/category")}>分類</button> <span onClick={() => this.navigateTo("/order")}>訂單</span> </div> <div className='counter'> <Routes> {/* 當(dāng)默認(rèn)路徑 / 時(shí), 重定向到home頁(yè)面 */} <Route path='/' element={<Navigate to="/home"/>}></Route> {/* 配置二級(jí)路由 */} <Route path='/home' element={<Home/>}> <Route path='/home' element={<Navigate to="/home/recommend"/>}/> <Route path='/home/recommend' element={<HomeRecommend/>}/> <Route path='home/ranking' element={<HomeRanking/>}/> </Route> <Route path='/about' element={<About/>}/> <Route path='/profile' element={<Profile/>}/> <Route path='/category' element={<Category/>}/> <Route path='/order' element={<Order/>}/> {/* 當(dāng)上面路徑都沒(méi)有匹配到時(shí), 顯式Notfound組件 */} <Route path='*' element={<Notfound/>}/> </Routes> </div> <div className='footer'>footer</div> </div> ) } } // 使用高階組件對(duì)App組件進(jìn)行增強(qiáng) export default withRouter(App)
到此這篇關(guān)于React中的路由嵌套和手動(dòng)實(shí)現(xiàn)路由跳轉(zhuǎn)的方式的文章就介紹到這了,更多相關(guān)react路由嵌套和路由跳轉(zhuǎn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- React進(jìn)行路由跳轉(zhuǎn)的方法匯總
- React路由跳轉(zhuǎn)的實(shí)現(xiàn)示例
- React 中常用的幾種路由跳轉(zhuǎn)方式小結(jié)
- react路由跳轉(zhuǎn)傳參刷新頁(yè)面后參數(shù)丟失的解決
- react中路由跳轉(zhuǎn)及傳參的實(shí)現(xiàn)
- React中的Hooks路由跳轉(zhuǎn)問(wèn)題
- React-RouterV6+AntdV4實(shí)現(xiàn)Menu菜單路由跳轉(zhuǎn)的方法
- 基于React路由跳轉(zhuǎn)的幾種方式
- react-router v4如何使用history控制路由跳轉(zhuǎn)詳解
- react 路由跳轉(zhuǎn)的7種方式實(shí)現(xiàn)
相關(guān)文章
Objects are not valid as a Rea
這篇文章主要為大家介紹了Objects are not valid as a React child報(bào)錯(cuò)解決方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12Remix路由模塊輸出對(duì)象loader函數(shù)詳解
這篇文章主要為大家介紹了Remix路由模塊輸出對(duì)象loader函數(shù)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪<BR>2023-04-04React實(shí)現(xiàn)反向代理和修改打包后的目錄
這篇文章主要介紹了React實(shí)現(xiàn)反向代理和修改打包后的目錄方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07React+Antd+Redux實(shí)現(xiàn)待辦事件的方法
這篇文章主要介紹了React+Antd+Redux實(shí)現(xiàn)待辦事件的方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03React中獲取數(shù)據(jù)的3種方法及優(yōu)缺點(diǎn)
這篇文章主要介紹了React中獲取數(shù)據(jù)的3種方法及優(yōu)缺點(diǎn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02react項(xiàng)目如何運(yùn)行在微信公眾號(hào)
這篇文章主要介紹了react項(xiàng)目如何運(yùn)行在微信公眾號(hào),幫助大家更好的理解和學(xué)習(xí)使用react,感興趣的朋友可以了解下2021-04-04React Native基礎(chǔ)入門之初步使用Flexbox布局
React中引入了flexbox概念,flexbox是屬于web前端領(lǐng)域CSS的一種布局方案,下面這篇文章主要給大家介紹了關(guān)于React Native基礎(chǔ)入門之初步使用Flexbox布局的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2018-07-07