文章目录
1.useRoutes()
2. useNavigate()
3. useParams()
4. useSearchParams()
5. useLocation()
6. useMatch()
7. useInRouterContext()
8. useNavigationType()
9. useOutlet()
10. useResolvedPath()
1、useRoutes()
-
根据路由表,动态创建
<Routes>
和<Route>
-
import { useRoutes } from 'react-router-dom'// 定义路由表 const elements = useRoutes([{path: '/about',element: <About /> }, {path: '/home',element: <Home /> }, {path: '/',element: <Navigate to='/about' /> }])// 在配置路由管理的地方直接插入即可 {elements}// 子路由直接使用<Outlet/> 标签占位即可 <Outlet/>
-
返回一个函数用来实现编程式路由导航
-
import { useNavigate } from 'react-router-dom'navigat('detail', {replace: false,state: message })
3、useParams()
-
接收当前路由的
params
参数,对标 5 路由组件的match.params
-
import { useParams } from 'react-router-dom'const { x, xx, xxx } = useParams()// 也可以用 useMatch 但是正常人不会用的,因为它需要传入全路径: // useMatch('/home/message/detail/:id/:title/:info')
4、useSearchParams()
-
用于读取和修改当前路由 URL 中的查询字符串(就是search参数)
-
返回一个包含两个值的数组:当前search集合,更新search集合的函数
-
import { useSearchParams } from 'react-router-dom'// 获取search参数 const [search, setSearch] = useSearchParams() const x = search.get('x') const xx = search.get('xx') const xxx = search.get('xxx')// 修改search参数 setSearch('x=5000&xx=新标题&xxx=小猪佩奇')
5、useLocation()
-
获取当前路由
loacation
值,对标 5 路由组件的location
属性 -
import { useLocation } from 'react-router-dom'// 直接连续结构获取 location 中的 state 的属性 const { state: { id, title, info } } = useLocation()
6、useMatch()
-
返回当前匹配信息,对标 5 路由组件的
match
属性 -
非特殊情况正常人不会用的,因为它需要传入全路径:
-
// 路由配置 <Route path='/home/message/detail/:id/:title/:info' element={<Message/>}/>// Message组件引入 useParams import { useParams } from 'react-router-dom' // Message组件获取匹配信息 const match = useMatch('/home/message/detail/:id/:title/:info')// match 对象输出如下(其他方式传参pathxxx不会有后缀) {params: {},pathname: "/home/message/detail/x/xx/xxx",pathnameBase: "/home/message/detail/x/xx/xxx",pattern: {path: "/home/message/detail/:id/:title/:info"caseSensitive: false,end: true,} }
-
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h5cky9JS-1670030848477)(react_router_6.assets/image-20221203092512690.png)]
7、useInRouterContext()
- 如果组件在
Router
的上下文中呈现(处在路由组件内),则useInRouterContext()
钩子返回 true,否则返回 false
- 返回当前的导航类型(用户是如何来到当前页面的)
- 返回值:
POP
、PUSH
、REPLACE
- 备注:
POP
是指在浏览器中直接打开了这个路由组件(刷新页面或者路由首页)
9、useOutlet()
- 用来呈现当前组件中要渲染的嵌套路由
const result = useOutlet()
// 如果嵌套路由没挂载:null
// 如果嵌套路由已挂载:嵌套路由对象
10、useResolvedPath()
- 给定一个URL值,解析其中的 path、search、hash 值