詳解react-router-dom v6版本基本使用介紹

更新時間：2022年03月11日 09:13:35 作者：Rise_11

本文主要介紹了react-router-dom v6版本基本使用介紹，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

Routes

代替Switch組件,不會向下匹配
用來包裹Route

Route

必須被Routes組件包裹
component屬性變成element
caseSensitive 路徑大小寫敏感屬性，默認是不敏感（訪問/about = /ABOUT）
index 與path屬性是互斥的，index表示為當(dāng)前路由的根
可以用作layout組件，不寫element屬性，寫了要與 Outlet組件配合使用（嵌套路由）

? ? ? ? <Routes>
? ? ? ? ? <Route path='/home' element={<Home />}></Route>
? ? ? ? ? <Route path='/about' element={<About />} caseSensitive={false} />
? ? ? ? </Routes>

? ? ? ? <Route path='/user'>
? ? ? ? ? ? <Route index element={<h1>user~</h1>} />
? ? ? ? </Route>

Navigate

用來代替Redirect組件
replace屬性跳轉(zhuǎn)模式 "PUSH" | "REPLACE"
只要這個組件一渲染就會發(fā)生跳轉(zhuǎn)

? ? ? ? <Routes>
? ? ? ? ? <Route path='/home' element={<Home />}></Route>
? ? ? ? ? <Route path='/about' element={<About />} caseSensitive={false} />
? ? ? ? ? <Route path='*' element={<Navigate to='/home' />} />
? ? ? ? </Routes>

NavLink

className，自定義激活時的樣式名可以為字符串或者函數(shù)
end 匹配子路由時是否高亮
caseSensitive 代表匹配路徑時是否區(qū)分大小寫

useRoutes

用來管理路由表，相比v5，可能需要借助一些第三方庫來實現(xiàn)路由config管理，現(xiàn)在v6版本自帶

const routes = useRoutes([
? ? {
? ? ? path: '/home',
? ? ? element: <Home />
? ? },
? ? {
? ? ? path: '/about',
? ? ? element: <About />
? ? },
? ? {
? ? ? path: '*',
? ? ? element: <Navigate to='/home' />
? ? },
? ? {
? ? ? path: '/user',
? ? ? children: [
? ? ? ? {
? ? ? ? ? index: true,
? ? ? ? ? element: <h1>user~</h1> // 這種不屬于嵌套路由，這里面children會防到父親的位置，所以不需要配合Outlet組件使用
? ? ? ? }
? ? ? ]
? ? }
? ])

嵌套路由

嵌套路由一般是配合 Outlet 組件使用，此組件類似于Vue的router-view組件，告知子路由應(yīng)該渲染在什么位置

{
? ? ? path: '/home',
? ? ? element: <Home />, // 這種才屬于嵌套路由
? ? ? children: [
? ? ? ? {
? ? ? ? ? path: 'message',
? ? ? ? ? element: <Message />
? ? ? ? },
? ? ? ? {
? ? ? ? ? path: 'article',
? ? ? ? ? element: <Article />
? ? ? ? }
? ? ? ]
}

在Home組件中使用<Outlet/>才能渲染子路由

? ? ? <div style={{ marginTop: '48px' }}>
? ? ? ? <div className='nav'>
? ? ? ? ? <div className='nav-item'>
? ? ? ? ? ? <NavLink to='/home/message'>message</NavLink>
? ? ? ? ? </div>
? ? ? ? ? <div className='nav-item'>
? ? ? ? ? ? <NavLink to='/home/article'>article</NavLink>
? ? ? ? ? </div>
? ? ? ? ? <div style={{ marginTop: 36 }}>
? ? ? ? ? ? <Outlet />
? ? ? ? ? ? {/* {outlet} */}
? ? ? ? ? </div>
? ? ? ? </div>
? ? ? </div>

路由傳參

params傳參（useParams）
search參數(shù)傳參（useSearchParams）
state傳參 (useLocation，獲取v5版本的location對象，如果直接輸入可能state為null)

編程式導(dǎo)航

useNavigate

const navigate = useNavigate()

navigate('detail3', {

state: {

id: *item*.id,

content: *item*.content,

title: *item*.title

}

})

<button *onClick*={() => navigate(-1)}>back</button> 返回上一頁

<button *onClick*={() => navigate(1)}>go</button> 前進

其他一些hooks

useInRouterContext 判斷組件是否被Router包裹，可能有些第三方組件需要判斷
useNavigationType 返回用戶到當(dāng)前頁面的導(dǎo)航類型 "POP" | "PUSH" | "REPLACE";
- 注意 POP是指在瀏覽器直接打開了這個路由組件（刷新頁面）
useOutlet 返回嵌套的路由，可以代替Outlet組件
useResolvedPath 給定一個url，解析出path，hash，search（location對象）

到此這篇關(guān)于詳解react-router-dom v6版本基本使用介紹的文章就介紹到這了,更多相關(guān)react-router-dom v6使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: