useRouter

useRouter 是一个自定义的路由导航 Hook，它基于 React Router 提供更便捷的路由跳转操作。该 Hook 返回一组常用的导航方法以及 reactRouter 实例，以满足在组件中灵活使用路由的场景。

示例


import React from 'react';
import { useRouter } from '@/hooks/useRouter';
 
export default function Example() {
  const {
    navigate,
    back,
    forward,
    go,
    goHome,
    replace,
    reload,
    navigateUp,
    push,
    resetRoutes
  } = useRouter();
 
  return (
    <div>
      <button onClick={() => navigate('/about')}>Go to About</button>
      <button onClick={() => push('/blog', { page: 2 })}>Push /blog?page=2</button>
      <button onClick={() => back()}>Go Back</button>
      <button onClick={() => forward()}>Go Forward</button>
      <button onClick={() => go(2)}>Go +2</button>
      <button onClick={() => goHome()}>Go Home</button>
      <button onClick={() => replace('/contact')}>Replace with /contact</button>
      <button onClick={() => reload()}>Reload current route</button>
      <button onClick={() => navigateUp()}>Navigate Up (..)</button>
      <button onClick={() => resetRoutes()}>Reset Routes</button>
    </div>
  );
}

API


function useRouter() {
  return {
    back,           // 回到上一页
    forward,        // 前进到下一页
    go,             // 跳转到特定的历史记录位置
    goHome,         // 跳转到首页 '/'
    navigate,       // 路由跳转，可传入 path 或 delta
    navigateUp,     // 跳转到上一级路由 '..'
    push,           // 带 query/state 的路由跳转
    reactRouter,    // 原始的 React Router 实例
    reload,         // 刷新当前页面 (相当于 navigate(0))
    replace,        // 使用替换模式跳转 (不会添加历史记录)
    resetRoutes     // 重置路由
  };
}

下面详细介绍每个方法的用途、参数与返回值：

`navigate(path: To | null, options?: RouterNavigateOptions)`

说明：跳转到指定路径，或传入数字进行类似 go(delta) 的操作。
参数：
- path: 跳转的目标路径或数字；若是字符串则跳转到对应路由，若是数字则按照历史记录位置跳转。
- options: 额外跳转配置（如 replace、state 等，具体参考 React Router navigate 的第二个参数）。

`back()`

说明：回退到上一页。
等价于：reactRouter.navigate(-1)。

`forward()`

说明：前进到下一页。
等价于：reactRouter.navigate(1)。

`go(delta: number)`

说明：跳转到指定历史记录位置。
参数：
- delta: 一个整数。如果是负数代表后退，正数代表前进。

`replace(path: To)`

说明：使用替换模式跳转到 path，不会在浏览器历史中添加新纪录。
参数：
- path: 要跳转到的目标路由路径。

`reload()`

说明：刷新当前路由，效果类似浏览器刷新（只是借助路由跳转到当前路径，以产生刷新效果）。
等价于：reactRouter.navigate(0)。

`navigateUp()`

说明：跳转到当前路由的上一层路由。
等价于：reactRouter.navigate('..')。

`goHome()`

说明：跳转到网站根路径 /。
等价于：reactRouter.navigate('/')。

`push(path: string, query?: LocationQueryRaw, state?: any, _replace?: boolean)`

说明：带查询参数或 state 跳转到 path。
参数：
1. path: 路由路径字符串。
2. query (可选): 一个对象，用来生成查询字符串，如 {page: 2} 会变成 ?page=2。
3. state (可选): 路由状态对象，可在目标路由中通过 location.state 获取。
4. _replace (可选): 若为 true，则使用替换模式；默认值为 false。
说明：会先通过 stringifyQuery 方法将 query 转为查询字符串，并附加到 path 上。然后再调用 reactRouter.navigate(_path, { replace: _replace, state })。

`reactRouter`

说明：直接暴露原始的 reactRouter 实例（由内部的 initRouter() 提供），可进行更底层或自定义的操作。

`resetRoutes()`

说明：重置当前所有路由配置，一般用于需要在运行时动态更改路由时的场景。此方法来自 initRouter() 中暴露的 resetRoutes。

注意事项

基于 React Router 进行的封装。若需要使用更底层的路由 API（例如 useLocation、useParams 等），可在组件中直接导入 react-router-dom 的相关 Hook。
push 方法相对于 navigate 在使用查询参数和路由 state 时更方便；若只需简单跳转，推荐直接使用 navigate。
resetRoutes 的实现依赖项目内的路由初始化逻辑，如需自定义路由配置或多次刷新，需要自行扩展并保证该方法可行。

通过 useRouter，你可以在任何函数式组件中快速调用导航相关方法，简化常见的路由操作，让代码更为简洁。希望它能给你带来便利！