开封做网站,江苏省水建公司官网,网络规划设计师教程第2版2021版pdf下载,西部数码网站管理助手 2008一、概述
了解
React Router 以三个不同的包发布到 npm 上#xff0c;它们分别为
1、react-router#xff1a;路由的核心库#xff0c;提供了很多的组件、钩子。
2、react-router-dom#xff1a;包含 react-router 所有内容#xff0c;并添加一些专门用于 DOM 的组件它们分别为
1、react-router路由的核心库提供了很多的组件、钩子。
2、react-router-dom包含 react-router 所有内容并添加一些专门用于 DOM 的组件例如 BrowserRouter 等。
3、react-router-native包括 react-router 所有内容并添加一些专门用于 ReactNative 的API例如 NativeRouter 等。
与 React Router 5.x 版本相比改变了什么
1、内置组件的变化移除 Switch/ 新增 Routes/ 等。
2、语法的变化component{About} 变为 element{About/}等。
3、新增多个hookuseParams、useNavigate、useMatch等。
4、官方明确推荐函数式组件了
…
二、Component
1、 BrowserRouter
1说明BrowserRouter 用于包裹整个应用。
2示例代码
/* 入口文件 */
import React from react
import ReactDOM from react-dom/client
import { BrowserRouter } from react-router-domReactDOM.createRoot(document.getElementById(root)).render(BrowserRouter{/* 整体结构通常为App组件 */}/BrowserRouter
)2. HashRouter
1说明作用与 BrowserRouter 一样但 HashRouter 修改的是地址栏的 hash 值。
2备注6.x 版本中 HashRouter、BrowserRouter 的用法与 5.x 相同。
3、 Routes/ 与 Route/
1v6 版本中移出了先前的 Switch引入了新的替代者Routes 。
2 Routes 和 Route要配合使用且必须要用 Routes 包裹 Route 。
3Route 相当于一个 if 语句如果其路径与当前 URL 匹配则呈现其对应的组件。
4 Route caseSensitive 属性用于指定匹配时是否区分大小写默认为 false。
5当 URL 发生变化时Routes 都会查看其所有子 Route 元素以找到最佳匹配并呈现组件 。
6Route 也可以嵌套使用且可配合 useRoutes() 配置 “路由表” 但需要通过 Outlet 组件来渲染其子路由。
7示例代码
Routes/* path 属性用于定义路径element 属性用于定义当前路径所对应的组件 */Route path/login element{Login /}/Route/* 用于定义嵌套路由home 是一级路由对应的路径 /home */Route pathhome element{Home /}/* test1 和 test2 是二级路由对应的路径是/home/test1 或 /home/test2 */Route pathtest1 element{Test /}/RouteRoute pathtest2 element{Test2 /}/Route/Route// Route 也可以不写 element 属性这时就是用于展示嵌套的路由所对应的路径是/users/xxxRoute pathusersRoute pathxxx element{Demo /} //Route
/Routes4、Link
1作用修改URL且不发送网络请求路由链接。
2注意外侧需要用 BrowserRouter 或 HashRouter 包裹。
3示例代码
import { Link } from react-router-domfunction Test() {return (divLink to/路径按钮/Link/div)
}5、NavLink
1作用与 Link 组件类似且可实现导航的 “高亮” 效果。
2示例代码
注意NavLink 默认类名是 active下面是指定自定义的 class
NavLinktologinclassName{ ({ isActive }) { isActive ? base selected : base }
login/NavLink默认情况下当 Home 的子组件匹配成功Home 的导航也会高亮
当 Home 的 NavLink 上添加了 end 属性后若 Home 的子组件匹配成功Home的导航不会高亮。
NavLink to/home end Home/NavLink6、Navigate
1作用只要 Navigate 组件被渲染就会修改路径切换视图。
2 replace 属性用于控制跳转模式默认值为 truepush 或 replace默认是push
3示例代码
import React, { useState } from react
import { Navigate } from react-router-domexport default function Home() {const [sum, setSum] useState(1)return (div我是Home组件内容/div{/* 根据sum的值决定是否切换视图只要 Navigate 组件被渲染就会修改路径切换视图 */}{ sum 2 ? Navigate to/about / : div当前sum的值是{sum}/div } button onClick{() setSum(2)}点我将sum变为2/button/)
}7、Outlet
1当 Route 产生嵌套时渲染其对应的后续子路由。
2示例代码
src/routes/index.js
import { Navigate } from react-router-dom
import About from ../pages/About
import Home from ../pages/Home
import Message from ../pages/Message
import News from ../pages/Newsexport default [{path: /about,element: About /},{path: /home,element: Home /,children: [{path: message,element: Message /},{path: news,element: News /}]},{path: /,element: Navigate to/about /}
]Home.jsx
import React from react
import { NavLink, Outlet } from react-router-domexport default function Home() {return (divh2Home组件内容/h2divul classNamenav nav-tabsliNavLink classNamelist-group-item to/home/newsNews/NavLink/liliNavLink classNamelist-group-item tomessageMessage/NavLink/li/ul{/* 指定路由组件呈现的位置 */}Outlet //div/div)
}
三、Hooks
1、useRoutes()
1作用根据路由表动态创建 Routes 和 Route 。
2示例代码
路由表配置文件src/routes/index.js
import { Navigate } from react-router-dom
import About from ../pages/About
import Home from ../pages/Homeexport 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 ./routesexport default function App() {// 根据路由表生成对应的路由规则const element useRoutes(routes)return (div......{/* 注册路由 */}{element}....../div)
}2、useNavigate()
1作用返回一个函数用来实现编程式路由导航。
2示例代码
import React from react
import { useNavigate } from react-router-domexport default function Demo() {const navigate useNavigate()const handle () {// 第一种使用方式指定具体的路径login中通过 useLocation hooks 接收navigate(/login, {replace: false,state: { a:1, b:2 }})// 第二种使用方式传入数值进行前进或后退类似于 5.x 中的 history.go() 方法navigate(-1)}return (divbutton onClick{handle}按钮/button/div)
}3、useParams()
1作用匹配当前路由的 params 参数类似于 5.x 中的 match.params 。
2示例代码
import React from react
import { Routes, Route, useParams } from react-router-dom
import User from ./pages/User.jsxfunction App() {return (RoutesRoute pathusers/:id element{User /}//Routes)
}function ProfilePage() {// 获取 URL 中携带过来的 params 参数let { id } useParams()
}4、useSearchParams()
1作用用于读取和修改当前位置的 URL 中的查询字符串。
2返回一个包含两个值的数组内容分别为当前的 seaech 参数、更新 search 的函数。
3示例代码
import React from react
import { useSearchParams } from react-router-domexport default function Detail() {// 函数式组件中通过 useSearchParams hooks 接收 路由的 search 类型参数// search.get(key) 获取对应参数值setSearch 更新接收到的 search 参数const [search, setSearch] useSearchParams()const id search.get(id)const title search.get(title)const content search.get(content)return (ullibutton onClick{() setSearch(id008title哈哈content嘻嘻)}点我更新一下收到的search参数/button/lili消息编号{id}/lili消息标题{title}/lili消息内容{content}/li/ul)
}5、useLocation()
1作用获取当前 location 信息对标 5.x 中的路由组件的 location 属性。
2示例代码
import React from react
import { useLocation} from react-router-domexport default function Detail() {// 了解函数式组件使用 this.props.location.search 形式const x useLocation()console.log(, x)// x 就是 location 对象/* {hash: ,key: 7yc2y2l9,pathname: /home/message/detail,search: ?id008title%E5%93%88%E5%93%88content%E5%98%BB%E5%98%BB,state: null} */return (ulli消息编号{id}/lili消息标题{title}/lili消息内容{content}/li/ul)
}6、useMatch()
1作用返回当前匹配信息对标 5.x 中的路由组件的 match 属性。
2 示例代码
接收 search 类型的路由参数
Route path/login/:page/:pageSize element{Login /}/
NavLink to/login/1/10登录/NavLinkexport default function Login() {const match useMatch(/login/:x/:y)console.log(match) // 输出 match 对象// match 对象内容如下/* {params: {x: 1, y: 10}pathname: /LoGin/1/10 pathnameBase: /LoGin/1/10pattern: {path: /login/:x/:y, caseSensitive: false, end: false}} */return (divh1Login/h1/div)
}接收 state 类型的路由参数
// Link todetail state{{ id: item.id, title: item.title, content: item.content }}{item.title}/Linkimport React from react
import { useLocation } from react-router-domexport default function Detail() {// 函数式组件中通过 useLocation hooks 接收 路由的 state 类型参数console.log(, useLocation())// 双重结构赋值const { state: { id, title, content } } useLocation()return (ulli消息编号{id}/lili消息标题{title}/lili消息内容{content}/li/ul)
}7、useInRouterContext()
作用如果组件在 Router 的上下文中呈现则 useInRouterContext 钩子返回 true否则返回 false。
8、useNavigationType()
1作用返回当前的导航类型用户是如何来到当前页面的。
2返回值POP、PUSH、REPLACE。
3备注POP 是指在浏览器中直接打开了这个路由组件刷新页面。
9、useOutlet() 作用用来呈现当前组件中渲染的嵌套路由。 示例代码 const result useOutlet()
console.log(result)
// 如果嵌套路由没有挂载则 result 为 null
// 如果嵌套路由已经挂载则展示嵌套的路由对象10、useResolvedPath()
1作用给定一个 URL值解析其中的 path、search、hash 值。
import { useResolvedPath } from react-router-domconsole.log(, useResolvedPath(/user?id001nametom#qwe))
// 输入 {pathname: /user, search: ?id001nametom, hash: #qwe}
