icp备案查询官方网站,wordpress修改自适应,网页制作 基础教程,wordpress主题cms博客1.概述 React Router 以三个不同的包发布到 npm 上#xff0c;它们分别为#xff1a; react-router: 路由的核心库#xff0c;提供了很多的#xff1a;组件、钩子。 react-router-dom: 包含react-router所有内容#xff0c;并添加一些专门用于 DOM 的组件#xff0c;例如… 1.概述 React Router 以三个不同的包发布到 npm 上它们分别为 react-router: 路由的核心库提供了很多的组件、钩子。 react-router-dom: 包含react-router所有内容并添加一些专门用于 DOM 的组件例如 BrowserRouter等 。 react-router-native: 包括react-router所有内容并添加一些专门用于ReactNative的API例如:NativeRouter等。 与React Router 5.x 版本相比改变了什么 内置组件的变化移除Switch/ 新增 Routes/等。 语法的变化component{About} 变为 element{About/}等。 新增多个hookuseParams、useNavigate、useMatch等。 官方明确推荐函数式组件了 ......
2.Component
1. BrowserRouter 说明BrowserRouter用于包裹整个应用。 示例代码 import React from react;
import ReactDOM from react-dom;
import { BrowserRouter } from react-router-dom;
ReactDOM.render(BrowserRouter{/* 整体结构通常为App组件 */}/BrowserRouter,root
);
2. HashRouter 说明作用与BrowserRouter一样但HashRouter修改的是地址栏的hash值。 备注6.x版本中HashRouter、BrowserRouter 的用法与 5.x 相同。
3. Routes/ 与 Route/ v6版本中移出了先前的Switch引入了新的替代者Routes。 Routes 和 Route要配合使用且必须要用Routes包裹Route。 Route 相当于一个 if 语句如果其路径与当前 URL 匹配则呈现其对应的组件。 Route caseSensitive 属性用于指定匹配时是否区分大小写默认为 false。 当URL发生变化时Routes都会查看其所有子Route 元素以找到最佳匹配并呈现组件 。 Route 也可以嵌套使用且可配合useRoutes()配置 “路由表” 但需要通过 Outlet 组件来渲染其子路由。 示例代码 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
/Routes
4. Link 作用: 修改URL且不发送网络请求路由链接。 注意: 外侧需要用BrowserRouter或HashRouter包裹。 示例代码 import { Link } from react-router-dom;
function Test() {return (divLink to/路径按钮/Link/div);
}
5. NavLink 作用: 与Link组件类似且可实现导航的“高亮”效果。 示例代码 // 注意: NavLink默认类名是active下面是指定自定义的class
//自定义样式
NavLinktologinclassName{({ isActive }) {console.log(home, isActive)return isActive ? base one : base}}
login/NavLink
/*默认情况下当Home的子组件匹配成功Home的导航也会高亮当NavLink上添加了end属性后若Home的子组件匹配成功则Home的导航没有高亮效果。
*/
NavLink tohome end home/NavLink
6. Navigate 作用只要Navigate组件被渲染就会修改路径切换视图。 replace属性用于控制跳转模式push 或 replace默认是push。 示例代码 import React,{useState} from react
import {Navigate} from react-router-dom
export default function Home() {const [sum,setSum] useState(1)return (divh3我是Home的内容/h3{/* 根据sum的值决定是否切换视图 */}{sum 1 ? h4sum的值为{sum}/h4 : Navigate to/about replace{true}/}button onClick{()setSum(2)}点我将sum变为2/button/div)
}
7. Outlet 当Route产生嵌套时渲染其对应的后续子路由。 示例代码to的路由地址可以写news,/news,./news一般直接写news //根据路由表生成对应的路由规则
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 (divh2Home组件内容/h2divul classNamenav nav-tabsliNavLink classNamelist-group-item tonewsNews/NavLink/liliNavLink classNamelist-group-item tomessageMessage/NavLink/li/ul{/* 指定路由组件呈现的位置 */}Outlet //div/div)
}
3.Hooks
1. useRoutes() 作用根据路由表动态创建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() {//根据路由表生成对应的路由规则const element useRoutes(routes)return (div......{/* 注册路由 */}{element}....../div)
}
2. useNavigate() 作用返回一个函数用来实现编程式导航。 示例代码 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} // 不能写search参数和params参数}) //第二种使用方式传入数值进行前进或后退类似于5.x中的 history.go()方法navigate(-1)}return (divbutton onClick{handle}按钮/button/div)
}
3. useParams() 作用回当前匹配路由的params参数类似于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中携带过来的params参数let { id } useParams();
}
function App() {return (RoutesRoute pathusers/:id element{User /}//Routes);
}
4. useSearchParams() 作用用于读取和修改当前位置的 URL 中的查询字符串。 返回一个包含两个值的数组内容分别为当前的seaech参数、更新search的函数。 示例代码 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 (ullibutton onClick{()setSearch(id008title哈哈content嘻嘻)}点我更新一下收到的search参数/button/lili消息编号{id}/lili消息标题{title}/lili消息内容{content}/li/ul)
}
5. useLocation() 作用获取当前 location 信息对标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对象: /*{hash: ,key: ah9nv6sz,pathname: /login,search: ?namezsage18,state: {a: 1, b: 2}}*/return (ulli消息编号{id}/lili消息标题{title}/lili消息内容{content}/li/ul)
}
6. useMatch() 作用返回当前匹配信息对标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对象//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)
}
7. useInRouterContext()
作用如果组件在 Router 的上下文中呈现则 useInRouterContext 钩子返回 true否则返回 false。
8. useNavigationType() 作用返回当前的导航类型用户是如何来到当前页面的。 返回值POP、PUSH、REPLACE。 备注POP是指在浏览器中直接打开了这个路由组件刷新页面。
9. useOutlet() 作用用来呈现当前组件中渲染的嵌套路由。 示例代码 const result useOutlet()
console.log(result)
// 如果嵌套路由没有挂载,则result为null
// 如果嵌套路由已经挂载,则展示嵌套的路由对象
10.useResolvedPath() 作用给定一个 URL值解析其中的path、search、hash值。
eg:
import { useResolvedPath } from react-router-dom
console.log(useResolvedPath(/user?id001nametom#sf));
// 打印结果
/*
{pathname: /user,search: ?id001nametom,hash: #sf
}
*/
