十一、【React-Router6】Hooks 汇总

文章目录

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

2、useNavigate()

• 返回一个函数用来实现编程式路由导航

• 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

8、useNavigationType()

• 返回当前的导航类型（用户是如何来到当前页面的）
• 返回值：POP、PUSH、REPLACE
• 备注：POP是指在浏览器中直接打开了这个路由组件（刷新页面或者路由首页）

9、useOutlet()

• 用来呈现当前组件中要渲染的嵌套路由

const result = useOutlet()
// 如果嵌套路由没挂载：null
// 如果嵌套路由已挂载：嵌套路由对象

10、useResolvedPath()

• 给定一个URL值，解析其中的 path、search、hash 值