React中路由的參數(shù)傳遞路由的配置文件詳解
路由的參數(shù)傳遞
傳遞參數(shù)有二種方式(需要注意的是, 這兩種方式在Router6.x中都是提供的hook函數(shù)的API, 類組件需要通過高階組件的方式使用):
動態(tài)路由的方式;
search傳遞參數(shù)(查詢字符串);
方式一: 動態(tài)路由的概念指的是路由中的路徑并不會固定:
比如/detail的path對應(yīng)一個組件Detail;
如果我們將path在Route匹配時寫成/detail/:id，那么 /detail/111、/detail/123都可以匹配到該Route，并且進(jìn)行顯示;
這個匹配規(guī)則，我們就稱之為動態(tài)路由;
通常情況下，使用動態(tài)路由可以為路由傳遞參數(shù)。
配置動態(tài)路由
render() {
return (
<div className='app'>
<div className='header'>
<Link to="detail/123">詳情123</Link>
<Link to="detail/321">詳情321</Link>
<Link to="detail/aaa">詳情aaa</Link>
</div>
<div className='counter'>
<Routes>
<Route path='/detail/:id' element={<Detail/>}/>
</Routes>
</div>
<div className='footer'>footer</div>
</div>
)
}在跳轉(zhuǎn)的頁面中可以通過hook函數(shù)useParms獲取到傳入的id, 由于我們現(xiàn)在使用的是類組件, 無法使用hook函數(shù), 因此需要通過高階組件對當(dāng)前組件增強(qiáng)(上一篇剛剛講過高階組件的封裝, 這里直接使用, 給到大家代碼)
import { useNavigate, useParams } from "react-router-dom"
export default function withRouter(WrapperComponent) {
return function(props) {
const naviagte = useNavigate()
const params = useParams()
const router = {naviagte, params}
return <WrapperComponent {...props} router={router} />
}
}
使用高階組件增強(qiáng)當(dāng)前Detail組件, 就可以通過useParams獲取到傳遞的id
import React, { PureComponent } from 'react'
import withRouter from '../hoc/with_router'
export class Detail extends PureComponent {
render() {
// 獲取到params
const { params } = this.props.router
return (
<div>
<h2>Detail</h2>
{/* 通過params獲取到id并展示 */}
<h2>id: {params.id}</h2>
</div>
)
}
}
export default withRouter(Detail)方式二: search傳遞參數(shù)(也就是查詢字符串的方式), 這里在User組件中進(jìn)行演示
在路由跳轉(zhuǎn)時拼接上查詢字符串
render() {
return (
<div className='app'>
<div className='header'>
<Link to="/user?name=chenyq&age=18&height=1.88">用戶</Link>
</div>
<div className='counter'>
<Routes>
<Route path='/user' element={<User/>} />
</Routes>
</div>
<div className='footer'>footer</div>
</div>
)
}查詢字符串需要通過hook函數(shù)useSearchParams獲取, 所以我們也需要使用高階組件對User組件進(jìn)行增強(qiáng)
// 封裝的高階組件
import { useNavigate, useParams, useSearchParams } from "react-router-dom"
export default function withRouter(WrapperComponent) {
return function(props) {
// 1.導(dǎo)航
const naviagte = useNavigate()
// 2.動態(tài)路由的參數(shù)
const params = useParams()
// 3.查詢字符串的參數(shù)
const [searchParams] = useSearchParams()
const query = Object.fromEntries(searchParams.entries)
const router = {naviagte, params, query}
return <WrapperComponent {...props} router={router} />
}
}在組件中就可以獲取到參數(shù)
import React, { PureComponent } from 'react'
import withRouter from '../hoc/with_router'
export class User extends PureComponent {
render() {
// 獲取高階組件中的query
const { query } = this.props.router
return (
<div>
<h2>User</h2>
{/* 通過query獲取參數(shù) */}
<h2>參數(shù): {query.name}-{query.age}-{query.height}</h2>
</div>
)
}
}
export default withRouter(User)路由的配置文件
目前我們所有的路由定義都是直接使用Route組件，并且添加屬性來完成的。
但是這樣的方式會讓路由變得非常混亂，我們希望像vue-router那樣, 將所有的路由配置放到一個單獨的文件進(jìn)行集中管理:
在早期的時候，Router并且沒有提供相關(guān)的API，我們需要借助于react-router-config完成;
在Router6.x中，為我們提供了useRoutes API可以完成相關(guān)的配置;
例如我們將下面的映射關(guān)系配置到一個單獨的文件中
<div className='counter'>
<Routes>
{/* 當(dāng)默認(rèn)路徑 / 時, 重定向到home頁面 */}
<Route path='/' element={<Navigate to="/home"/>}></Route>
{/* 配置二級路由 */}
<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/>}/>
<Route path='/detail/:id' element={<Detail/>}/>
<Route path='/user' element={<User/>} />
{/* 當(dāng)上面路徑都沒有匹配到時, 顯式Notfound組件 */}
<Route path='*' element={<Notfound/>}/>
</Routes>
</div>首先, 使用useRoutes這個API替代原來的Routes和Route組件, useRoutes可以當(dāng)成一個函數(shù)直接使用, 但是只能在函數(shù)組件中使用
<div className='counter'>
{useRoutes(routes)}
</div>再在route/index.js中對映射關(guān)系進(jìn)行配置
import { Navigate } from "react-router-dom"
import Home from '../pages/Home'
import About from '../pages/About'
import Profile from '../pages/Profile'
import Notfound from '../pages/Notfound'
import HomeRecommend from '../pages/HomeRecommend'
import HomeRanking from '../pages/HomeRanking'
import Category from '../pages/Category'
import Order from '../pages/Order'
import Detail from '../pages/Detail'
import User from '../pages/User'
const routes = [
{
path: "/",
element: <Navigate to="/home"/>
},
{
path: "/home",
element: <Home/>,
children: [
{
path: "/home",
element: <Navigate to="/home/recommend" />
},
{
path: "/home/recommend",
element: <HomeRecommend/>
},
{
path: "/home/ranking",
element: <HomeRanking/>
}
]
},
{
path: "/about",
element: <About/>
},
{
path: "/profile",
element: <Profile/>
},
{
path: "/category",
element: <Category/>
},
{
path: "/order",
element: <Order/>
},
{
path: "detail/:id",
element: <Detail/>
},
{
path: "/user",
element: <User/>
},
{
path: "*",
element: <Notfound/>
}
]
export default routes
如果我們對某些組件進(jìn)行了異步加載(懶加載, 分包處理)，那么需要使用Suspense進(jìn)行包裹:
例如我們對Detail和User進(jìn)行懶加載(分包處理)
// import Detail from '../pages/Detail'
// import User from '../pages/User'
const Detail = React.lazy(() => import("../pages/Detail"))
const User = React.lazy(() => import("../pages/User"))并且還需要使用Suspense對組件進(jìn)行包裹
root.render(
<HashRouter>
<Suspense fallback={<h3>loading</h3>}>
<App/>
</Suspense>
</HashRouter>
)到此這篇關(guān)于React中路由的參數(shù)傳遞 - 路由的配置文件的文章就介紹到這了,更多相關(guān)React路由參數(shù)傳遞內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
ReactQuery系列React?Query?實踐示例詳解
這篇文章主要為大家介紹了ReactQuery系列React?Query?實踐示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
React class和function的區(qū)別小結(jié)
Class組件和Function組件是React中創(chuàng)建組件的兩種主要方式,本文主要介紹了React class和function的區(qū)別小結(jié),具有一定的參考價值,感興趣的可以了解一下2023-10-10
詳解使用create-react-app添加css modules、sasss和antd
這篇文章主要介紹了詳解使用create-react-app添加css modules、sasss和antd，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
剛好手上有一個要實現(xiàn)文字跑馬燈的react項目，然后ant-design上面沒有這個組件，于是只能自己手?jǐn)]一個，文中的實現(xiàn)方法講解詳細(xì)，希望對大家有所幫助2023-01-01
this在javascript中已經(jīng)相當(dāng)靈活，這篇文章主要介紹了React.js綁定this的5種方法(小結(jié))，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
40行代碼把Vue3的響應(yīng)式集成進(jìn)React做狀態(tài)管理
這篇文章主要介紹了40行代碼把Vue3的響應(yīng)式集成進(jìn)React做狀態(tài)管理,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
這篇文章主要跟大家介紹了關(guān)于React-Native中一些常用組件的用法的相關(guān)資料，其中詳細(xì)介紹了關(guān)于ScrollView組件、ListView組件、Navigator組件、TableBarIOS組件以及網(wǎng)絡(luò)請求等相關(guān)內(nèi)容，需要的朋友可以參考借鑒，下面來一起看看吧。2017-06-06
這篇文章主要介紹了React diff算法的實現(xiàn)示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
react如何同步獲取useState的最新狀態(tài)值
這篇文章主要介紹了react如何同步獲取useState的最新狀態(tài)值問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
React Hooks是在React 16.8版本新增的特性，在我看了React官網(wǎng)和一些博客對React Hook的講解后還是覺得沒有g(shù)et到本質(zhì)。本篇博客通過手動實現(xiàn)useState()來了解Hook的原理和本質(zhì)。閱讀此篇博客的前提是你要知道一些 React Hooks的基本用法和使用規(guī)則，不然會看得云里霧里。2021-05-05