1.概述

1. React Router 以三個(gè)不同的包發(fā)布到 npm 上，它們分別為：

   1. react-router: 路由的核心庫(kù)，提供了很多的：組件、鉤子。
   2. react-router-dom: 包含react-router所有內(nèi)容，并添加一些專(zhuān)門(mén)用于 DOM 的組件，例如 <BrowserRouter>等 。
   3. react-router-native: 包括react-router所有內(nèi)容，并添加一些專(zhuān)門(mén)用于ReactNative的API，例如:<NativeRouter>等。

2. 與React Router 5.x 版本相比，改變了什么？

   1. 內(nèi)置組件的變化：移除<Switch/> ，新增 <Routes/>等。

   2. 語(yǔ)法的變化：component={About} 變?yōu)?element={<About/>}等。

   3. 新增多個(gè)hook：useParams、useNavigate、useMatch等。

   4. 官方明確推薦函數(shù)式組件了?。?！

      ......

2.Component

1. <BrowserRouter>

1. 說(shuō)明：<BrowserRouter> 用于包裹整個(gè)應(yīng)用。

2. 示例代碼：文章來(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>

1. 說(shuō)明：作用與<BrowserRouter>一樣，但<HashRouter>修改的是地址欄的hash值。
2. 備注：6.x版本中<HashRouter>、<BrowserRouter> 的用法與 5.x 相同。

3. <Routes/> 與 <Route/>

1. v6版本中移出了先前的<Switch>，引入了新的替代者：<Routes>。

2. <Routes> 和 <Route>要配合使用，且必須要用<Routes>包裹<Route>。

3. <Route> 相當(dāng)于一個(gè) if 語(yǔ)句，如果其路徑與當(dāng)前 URL 匹配，則呈現(xiàn)其對(duì)應(yīng)的組件。

4. <Route caseSensitive> 屬性用于指定：匹配時(shí)是否區(qū)分大小寫(xiě)（默認(rèn)為 false）。

5. 當(dāng)URL發(fā)生變化時(shí)，<Routes> 都會(huì)查看其所有子 <Route> 元素以找到最佳匹配并呈現(xiàn)組件 。

6. <Route> 也可以嵌套使用，且可配合useRoutes()配置 “路由表” ，但需要通過(guò) <Outlet> 組件來(lái)渲染其子路由。

7. 示例代碼：

   <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>

1. 作用: 修改URL，且不發(fā)送網(wǎng)絡(luò)請(qǐng)求（路由鏈接）。

2. 注意: 外側(cè)需要用<BrowserRouter>或<HashRouter>包裹。

3. 示例代碼：

   import { Link } from "react-router-dom";
   
   function Test() {
     return (
       <div>
       	<Link to="/路徑">按鈕</Link>
       </div>
     );
   }
   

5. <NavLink>

1. 作用: 與<Link>組件類(lèi)似，且可實(shí)現(xiàn)導(dǎo)航的“高亮”效果。

2. 示例代碼：

   // 注意: 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>

1. 作用：只要<Navigate>組件被渲染，就會(huì)修改路徑，切換視圖。

2. replace屬性用于控制跳轉(zhuǎn)模式（push 或 replace，默認(rèn)是push）。

3. 示例代碼：

   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>

1. 當(dāng)<Route>產(chǎn)生嵌套時(shí)，渲染其對(duì)應(yīng)的后續(xù)子路由。

2. 示例代碼：

   //根據(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()

1. 作用：根據(jù)路由表，動(dòng)態(tài)創(chuàng)建<Routes>和<Route>。

2. 示例代碼：

   //路由表配置：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()

1. 作用：返回一個(gè)函數(shù)用來(lái)實(shí)現(xiàn)編程式導(dǎo)航。

2. 示例代碼：

   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()

1. 作用：回當(dāng)前匹配路由的params參數(shù)，類(lèi)似于5.x中的match.params。

2. 示例代碼：

   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()

1. 作用：用于讀取和修改當(dāng)前位置的 URL 中的查詢(xún)字符串。

2. 返回一個(gè)包含兩個(gè)值的數(shù)組，內(nèi)容分別為：當(dāng)前的seaech參數(shù)、更新search的函數(shù)。

3. 示例代碼：

   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()

1. 作用：獲取當(dāng)前 location 信息，對(duì)標(biāo)5.x中的路由組件的location屬性。

2. 示例代碼：

   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()

1. 作用：返回當(dāng)前匹配信息，對(duì)標(biāo)5.x中的路由組件的match屬性。

2. 示例代碼：

   <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()

1. 作用：返回當(dāng)前的導(dǎo)航類(lèi)型（用戶(hù)是如何來(lái)到當(dāng)前頁(yè)面的）。
2. 返回值：POP、PUSH、REPLACE。
3. 備注：POP是指在瀏覽器中直接打開(kāi)了這個(gè)路由組件（刷新頁(yè)面）。

9. useOutlet()

1. 作用：用來(lái)呈現(xiàn)當(dāng)前組件中渲染的嵌套路由。

2. 示例代碼：

   const result = useOutlet()
   console.log(result)
   // 如果嵌套路由沒(méi)有掛載,則result為null
   // 如果嵌套路由已經(jīng)掛載,則展示嵌套的路由對(duì)象
   

10.useResolvedPath()

1. 作用：給定一個(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)！