1.概述
-
React Router 以三個(gè)不同的包發(fā)布到 npm 上,它們分別為:
- react-router: 路由的核心庫(kù),提供了很多的:組件、鉤子。
-
react-router-dom: 包含react-router所有內(nèi)容,并添加一些專(zhuān)門(mén)用于 DOM 的組件,例如
<BrowserRouter>
等 。 - react-router-native: 包括react-router所有內(nèi)容,并添加一些專(zhuān)門(mén)用于ReactNative的API,例如:
<NativeRouter>
等。
-
與React Router 5.x 版本相比,改變了什么?
-
內(nèi)置組件的變化:移除
<Switch/>
,新增<Routes/>
等。 -
語(yǔ)法的變化:
component={About}
變?yōu)?element={<About/>}
等。 -
新增多個(gè)hook:
useParams
、useNavigate
、useMatch
等。 -
官方明確推薦函數(shù)式組件了?。?!
......
-
2.Component
1. <BrowserRouter>
-
說(shuō)明:
<BrowserRouter>
用于包裹整個(gè)應(yīng)用。 -
示例代碼:文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-667898.html
import React from "react"; import ReactDOM from "react-dom"; import { BrowserRouter } from "react-router-dom"; ReactDOM.render( <BrowserRouter> {/* 整體結(jié)構(gòu)(通常為App組件) */} </BrowserRouter>,root );
2. <HashRouter>
- 說(shuō)明:作用與
<BrowserRouter>
一樣,但<HashRouter>
修改的是地址欄的hash值。 - 備注:6.x版本中
<HashRouter>
、<BrowserRouter>
的用法與 5.x 相同。
3. <Routes/> 與 <Route/>
-
v6版本中移出了先前的
<Switch>
,引入了新的替代者:<Routes>
。 -
<Routes>
和<Route>
要配合使用,且必須要用<Routes>
包裹<Route>
。 -
<Route>
相當(dāng)于一個(gè) if 語(yǔ)句,如果其路徑與當(dāng)前 URL 匹配,則呈現(xiàn)其對(duì)應(yīng)的組件。 -
<Route caseSensitive>
屬性用于指定:匹配時(shí)是否區(qū)分大小寫(xiě)(默認(rèn)為 false)。 -
當(dāng)URL發(fā)生變化時(shí),
<Routes>
都會(huì)查看其所有子<Route>
元素以找到最佳匹配并呈現(xiàn)組件 。 -
<Route>
也可以嵌套使用,且可配合useRoutes()
配置 “路由表” ,但需要通過(guò)<Outlet>
組件來(lái)渲染其子路由。 -
示例代碼:
<Routes> /*path屬性用于定義路徑,element屬性用于定義當(dāng)前路徑所對(duì)應(yīng)的組件*/ <Route path="/login" element={<Login />}></Route> /*用于定義嵌套路由,home是一級(jí)路由,對(duì)應(yīng)的路徑/home*/ <Route path="home" element={<Home />}> /*test1 和 test2 是二級(jí)路由,對(duì)應(yīng)的路徑是/home/test1 或 /home/test2*/ <Route path="test1" element={<Test/>}></Route> <Route path="test2" element={<Test2/>}></Route> </Route> //Route也可以不寫(xiě)element屬性, 這時(shí)就是用于展示嵌套的路由 .所對(duì)應(yīng)的路徑是/users/xxx <Route path="users"> <Route path="xxx" element={<Demo />} /> </Route> </Routes>
4. <Link>
-
作用: 修改URL,且不發(fā)送網(wǎng)絡(luò)請(qǐng)求(路由鏈接)。
-
注意: 外側(cè)需要用
<BrowserRouter>
或<HashRouter>
包裹。 -
示例代碼:
import { Link } from "react-router-dom"; function Test() { return ( <div> <Link to="/路徑">按鈕</Link> </div> ); }
5. <NavLink>
-
作用: 與
<Link>
組件類(lèi)似,且可實(shí)現(xiàn)導(dǎo)航的“高亮”效果。 -
示例代碼:
// 注意: NavLink默認(rèn)類(lèi)名是active,下面是指定自定義的class //自定義樣式 <NavLink to="login" className={({ isActive }) => { console.log('home', isActive) return isActive ? 'base one' : 'base' }} >login</NavLink> /* 默認(rèn)情況下,當(dāng)Home的子組件匹配成功,Home的導(dǎo)航也會(huì)高亮, 當(dāng)NavLink上添加了end屬性后,若Home的子組件匹配成功,則Home的導(dǎo)航?jīng)]有高亮效果。 */ <NavLink to="home" end >home</NavLink>
6. <Navigate>
-
作用:只要
<Navigate>
組件被渲染,就會(huì)修改路徑,切換視圖。 -
replace
屬性用于控制跳轉(zhuǎn)模式(push 或 replace,默認(rèn)是push)。 -
示例代碼:
import React,{useState} from 'react' import {Navigate} from 'react-router-dom' export default function Home() { const [sum,setSum] = useState(1) return ( <div> <h3>我是Home的內(nèi)容</h3> {/* 根據(jù)sum的值決定是否切換視圖 */} {sum === 1 ? <h4>sum的值為{sum}</h4> : <Navigate to="/about" replace={true}/>} <button onClick={()=>setSum(2)}>點(diǎn)我將sum變?yōu)?</button> </div> ) }
7. <Outlet>
-
當(dāng)
<Route>
產(chǎn)生嵌套時(shí),渲染其對(duì)應(yīng)的后續(xù)子路由。 -
示例代碼:
//根據(jù)路由表生成對(duì)應(yīng)的路由規(guī)則 const element = useRoutes([ { path:'/about', element:<About/> }, { path:'/home', element:<Home/>, children:[ { path:'news', element:<News/> }, { path:'message', element:<Message/>, } ] } ]) //Home.js import React from 'react' import {NavLink,Outlet} from 'react-router-dom' export default function Home() { return ( <div> <h2>Home組件內(nèi)容</h2> <div> <ul className="nav nav-tabs"> <li> <NavLink className="list-group-item" to="news">News</NavLink> </li> <li> <NavLink className="list-group-item" to="message">Message</NavLink> </li> </ul> {/* 指定路由組件呈現(xiàn)的位置 */} <Outlet /> </div> </div> ) }
3.Hooks
1. useRoutes()
-
作用:根據(jù)路由表,動(dòng)態(tài)創(chuàng)建
<Routes>
和<Route>
。 -
示例代碼:
//路由表配置:src/routes/index.js import About from '../pages/About' import Home from '../pages/Home' import {Navigate} from 'react-router-dom' export default [ { path:'/about', element:<About/> }, { path:'/home', element:<Home/> }, { path:'/', element:<Navigate to="/about"/> } ] //App.jsx import React from 'react' import {NavLink,useRoutes} from 'react-router-dom' import routes from './routes' export default function App() { //根據(jù)路由表生成對(duì)應(yīng)的路由規(guī)則 const element = useRoutes(routes) return ( <div> ...... {/* 注冊(cè)路由 */} {element} ...... </div> ) }
2. useNavigate()
-
作用:返回一個(gè)函數(shù)用來(lái)實(shí)現(xiàn)編程式導(dǎo)航。
-
示例代碼:
import React from 'react' import {useNavigate} from 'react-router-dom' export default function Demo() { const navigate = useNavigate() const handle = () => { //第一種使用方式:指定具體的路徑 navigate('/login', { replace: false, state: {a:1, b:2} }) //第二種使用方式:傳入數(shù)值進(jìn)行前進(jìn)或后退,類(lèi)似于5.x中的 history.go()方法 navigate(-1) } return ( <div> <button onClick={handle}>按鈕</button> </div> ) }
3. useParams()
-
作用:回當(dāng)前匹配路由的
params
參數(shù),類(lèi)似于5.x中的match.params
。 -
示例代碼:
import React from 'react'; import { Routes, Route, useParams } from 'react-router-dom'; import User from './pages/User.jsx' function ProfilePage() { // 獲取URL中攜帶過(guò)來(lái)的params參數(shù) let { id } = useParams(); } function App() { return ( <Routes> <Route path="users/:id" element={<User />}/> </Routes> ); }
4. useSearchParams()
-
作用:用于讀取和修改當(dāng)前位置的 URL 中的查詢(xún)字符串。
-
返回一個(gè)包含兩個(gè)值的數(shù)組,內(nèi)容分別為:當(dāng)前的seaech參數(shù)、更新search的函數(shù)。
-
示例代碼:
import React from 'react' import {useSearchParams} from 'react-router-dom' export default function Detail() { const [search,setSearch] = useSearchParams() const id = search.get('id') const title = search.get('title') const content = search.get('content') return ( <ul> <li> <button onClick={()=>setSearch('id=008&title=哈哈&content=嘻嘻')}>點(diǎn)我更新一下收到的search參數(shù)</button> </li> <li>消息編號(hào):{id}</li> <li>消息標(biāo)題:{title}</li> <li>消息內(nèi)容:{content}</li> </ul> ) }
5. useLocation()
-
作用:獲取當(dāng)前 location 信息,對(duì)標(biāo)5.x中的路由組件的
location
屬性。 -
示例代碼:
import React from 'react' import {useLocation} from 'react-router-dom' export default function Detail() { const x = useLocation() console.log('@',x) // x就是location對(duì)象: /* { hash: "", key: "ah9nv6sz", pathname: "/login", search: "?name=zs&age=18", state: {a: 1, b: 2} } */ return ( <ul> <li>消息編號(hào):{id}</li> <li>消息標(biāo)題:{title}</li> <li>消息內(nèi)容:{content}</li> </ul> ) }
6. useMatch()
-
作用:返回當(dāng)前匹配信息,對(duì)標(biāo)5.x中的路由組件的
match
屬性。 -
示例代碼:
<Route path="/login/:page/:pageSize" element={<Login />}/> <NavLink to="/login/1/10">登錄</NavLink> export default function Login() { const match = useMatch('/login/:x/:y') console.log(match) //輸出match對(duì)象 //match對(duì)象內(nèi)容如下: /* { params: {x: '1', y: '10'} pathname: "/LoGin/1/10" pathnameBase: "/LoGin/1/10" pattern: { path: '/login/:x/:y', caseSensitive: false, end: false } } */ return ( <div> <h1>Login</h1> </div> ) }
7. useInRouterContext()
? 作用:如果組件在 <Router>
的上下文中呈現(xiàn),則 useInRouterContext
鉤子返回 true,否則返回 false。
8. useNavigationType()
- 作用:返回當(dāng)前的導(dǎo)航類(lèi)型(用戶(hù)是如何來(lái)到當(dāng)前頁(yè)面的)。
- 返回值:
POP
、PUSH
、REPLACE
。 - 備注:
POP
是指在瀏覽器中直接打開(kāi)了這個(gè)路由組件(刷新頁(yè)面)。
9. useOutlet()
-
作用:用來(lái)呈現(xiàn)當(dāng)前組件中渲染的嵌套路由。文章來(lái)源:http://www.zghlxwxcb.cn/news/detail-667898.html
-
示例代碼:
const result = useOutlet() console.log(result) // 如果嵌套路由沒(méi)有掛載,則result為null // 如果嵌套路由已經(jīng)掛載,則展示嵌套的路由對(duì)象
10.useResolvedPath()
- 作用:給定一個(gè) URL值,解析其中的:path、search、hash值。
到了這里,關(guān)于React Router 6 快速上手的文章就介紹完了。如果您還想了解更多內(nèi)容,請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!