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)前組件增強(上一篇剛剛講過高階組件的封裝, 這里直接使用, 給到大家代碼)
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} />
}
}
使用高階組件增強當(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)行增強
// 封裝的高階組件
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組件，并且添加屬性來完成的。
但是這樣的方式會讓路由變得非?；靵y，我們希望像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)文章
這篇文章主要為大家介紹了React前端DOM常見Hook封裝示例上篇，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
D3.js(v3)+react 實現(xiàn)帶坐標(biāo)與比例尺的柱形圖 (V3版本)
這篇文章主要介紹了D3.js(v3)+react 制作 一個帶坐標(biāo)與比例尺的柱形圖 (V3版本) ，本文通過實例代碼文字相結(jié)合的形式給大家介紹的非常詳細(xì),需要的朋友可以參考下2019-05-05
這篇文章主要介紹了關(guān)于react中useCallback的用法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了React反向代理及樣式獨立詳解，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的朋友可以參考一下2022-08-08
Electron整合React使用搭建開發(fā)環(huán)境的步驟詳解
這篇文章主要介紹了Electron整合React使用搭建開發(fā)環(huán)境，本文分步驟給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值 ,需要的朋友可以參考下2020-06-06
react-native中路由頁面的跳轉(zhuǎn)與傳參的實例詳解
這篇文章主要介紹了react-native中路由頁面的跳轉(zhuǎn)與傳參,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-08-08
在React中,要實現(xiàn)一個組件表格并且固定底部,可以使用CSS的固定定位或絕對定位來實現(xiàn),下面通過示例代碼給大家分享react 組件表格固定底部的實現(xiàn)代碼,感興趣的朋友跟隨小編一起看看吧2024-05-05
這篇文章主要介紹了react中定義變量并使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
react axios配置代理(proxy),如何解決本地開發(fā)時的跨域問題
這篇文章主要介紹了react axios配置代理(proxy),如何解決本地開發(fā)時的跨域問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
React實現(xiàn)數(shù)字滾動組件numbers-scroll的示例詳解
數(shù)字滾動組件，也可以叫數(shù)字輪播組件，這個名字一聽就是非常普通常見的組件。本文將利用React實現(xiàn)這一組件，感興趣的小伙伴可以了解一下2023-03-03