React Router 6:hooks篇
前言
大家好,我是小阵 🔥,一路奔波不停的码字业务员 如果喜欢我的文章,可以关注 ➕ 点赞,与我一同成长吧~😋 加我微信:zzz886885,邀你进群,一起学习交流,摸鱼学习两不误🌟
开开心心学技术大法~~
来了来了,他真的来了~
正文
React18用上了,React Router6你用上了吗?
react-router组成
router有三部分
react-router
react-router-dom
react-router-native
其中react-router
是react-router-dom
和react-router-native
的核心,一般不作为单独包引入。
如果是web端,可直接引用react-router-dom
如果是react-native
端,可以使用react-router-native
包
react-router-dom
组成
- components
- hooks
- routers
- utils
因为篇幅太长,昨天写了React Router6:components篇,今天写下hooks
篇
hooks
-
useHref
通常用于自定义
Link
中,接收一个Link
的to
属性,返回一个完整的路由路径
比如:
父组件
<SelfLink to="/demo2" key='dom1'>dom1</SelfLink>
自定义路由组件
import React from "react"; import { Link, useHref } from "react-router-dom"; function SelfLink({ to, ...props }) { const href = useHref(to) console.log('selflink hooks', href, to) // selflink hooks #/demo2 /demo2 return ( <Link to={to} {...props} /> ); } export default SelfLink;
-
useInRouterContext
如果该组件渲染在
Router
内部,则为true
,否则为false
通常用于在第三方插件中判断是否渲染于
React
环境中 -
useLinkClickHandler
在
自定义Link
中基于navigation返回一个onClick
点击事件处理函数一般用于重写
Link
的onClick
方法import React from "react"; import { Link, useLinkClickHandler } from "react-router-dom"; function SelfLink({ to, replace, state, target, ...props }) { let handleClick = useLinkClickHandler(to, { replace, state, target, }); return ( <Link to={to} onClick={(event) => { if (!event.defaultPrevented) { handleClick(event); } }} {...props} /> ); } export default SelfLink;
-
useLinkPressHandler
同上面的
useLinkClickHandler
,唯一不同的是,返回的是onPress
按压事件处理函数 -
useLocation
返回当前
location
的object,常用于监听该location object
用于触发一些副作用比如:
import * as React from 'react'; import { useLocation } from 'react-router-dom'; function App() { let location = useLocation(); // 返回的location:{ // "pathname": "/demo2", // "search": "", // "hash": "", // "state": null, // "key": "n4yxhbsy" // } React.useEffect(() => { ga('send', 'pageview'); }, [location]); return ( // ... ); }
-
useMatch
传入一个
PathPattern | string
返回相对于当前位置的给定路径的路线匹配数据。
-
如果匹配返回匹配到的路由信息,比如
{ "params": {}, "pathname": "/demo2", "pathnameBase": "/demo2", "pattern": { "path": "demo2", "caseSensitive": false, "end": true } }
-
如果不匹配,返回
null
-
-
useNavigate
返回一个
navigate
,允许你通过该navigate
进行编程式导航不过编程式导航一般用
react-router-dom
的history
来进行编程式导航-
navigate参数
- 第一个参数是要跳转的路径,参考
Link
的to
;也可以是历史堆栈信息,比如-1
表示后退一个路由 - 第二个参数参考
Link
的其他参数,比如{ replace, state }
- 第一个参数是要跳转的路径,参考
比如:
import { useNavigate } from "react-router-dom"; function SignupForm() { let navigate = useNavigate(); async function handleSubmit(event) { event.preventDefault(); await submitForm(event.target); navigate("../success", { replace: true }); } return <form onSubmit={handleSubmit}>{/* ... */}</form>; }
-
-
useNavigationType
返回进入该路由的
navigation
方式,比如pop
、push
、replace
-
useOutletContext
用于子路由组件中
配合
Outlet
标签上的context
属性使用比如父路由组件中:
function Parent() { const [count, setCount] = React.useState(0); return <Outlet context={[count, setCount]} />; }
子路由组件中
import { useOutletContext } from "react-router-dom"; function Child() { const [count, setCount] = useOutletContext(); const increment = () => setCount((c) => c + 1); return <button onClick={increment}>{count}</button>; }
-
useOutlet
返回
outlet
组件,在jsx中一般没有使用的必要以下使用方式相同
import { useOutlet } from "react-router-dom"; function A(){ const outlet = useOutlet() return ( <div> {outlet} </div> ) }
import { Outlet } from "react-router-dom"; function A(){ return ( <div> <Outlet /> </div> ) }
-
useParams
返回路由上带的
search
参数import * as React from 'react'; import { Routes, Route, useParams } from 'react-router-dom'; function ProfilePage() { // Get the userId param from the URL. let { userId } = useParams(); // ... } function App() { return ( <Routes> <Route path="users"> <Route path=":userId" element={<ProfilePage />} /> <Route path="me" element={...} /> </Route> </Routes> ); }
-
useResolvedPath
跟
useHref
类似,入参为Link
的to
返回一个解析后的
path object
,包含pathname
、search
等参数如:
{ "pathname": "/demo2", "search": "", "hash": "" }
-
useRoutes
功能类似于
Routes
,依据传入的routes json
返回所有路由信息如:
import * as React from "react"; import { useRoutes } from "react-router-dom"; function App() { let element = useRoutes([ { path: "/", element: <Dashboard />, children: [ { path: "messages", element: <DashboardMessages />, }, { path: "tasks", element: <DashboardTasks /> }, ], }, { path: "team", element: <AboutPage /> }, ]); return element; }
-
useSearchParams
跟
setState
的结构一样,返回一个获取当前路由信息的search params
信息,和一个改变该信息的函数如
import * as React from "react"; import { useSearchParams } from "react-router-dom"; function App() { let [searchParams, setSearchParams] = useSearchParams(); function handleSubmit(event) { event.preventDefault(); // The serialize function here would be responsible for // creating an object of { key: value } pairs from the // fields in the form that make up the query. let params = serializeFormQuery(event.target); setSearchParams(params); } return ( <div> <form onSubmit={handleSubmit}>{/* ... */}</form> </div> ); }
结语
如果文章真的有帮到你,希望可以多多点赞、收藏、关注支持一波呀!!小阵会很开心哒~
文章如有错误或不严谨之处,还望指出,感谢感谢!!!
往期好文推荐「我不推荐下,大家可能就错过了史上最牛逼vscode插件集合
啦!!!(嘎嘎嘎~)😄」