文章目录

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 值