React项目在ts文件中使用router实现跳转

前言：

        默认你已经进行了router的安装，目前到了配置http请求的步骤，在配置token失效或其他原因，需要实现路由跳转。在普通的 TypeScript 文件中无法直接使用Router的 useNavigate Hook。Hook 只能在 React 组件或自定义 Hook 中调用。

实现方案：

        封装一个路由工具函数

 1、配置router.ts文件

使用模块级变量 _navigate 保存路由函数

// src/utils/router.ts
import { NavigateFunction } from 'react-router-dom';

// 存储路由函数的引用
let _navigate: NavigateFunction | null = null;

// 初始化路由函数
export const setRouter = (navigate: NavigateFunction) => {
  _navigate = navigate;
};

// 暴露
export const router = {
  navigate: (to: string) => {
    if (_navigate) {
      _navigate(to);
    } else {
      console.warn('Router 未初始化！');
    }
  },
};

2、在根组件初始化

// src/App.tsx
import { useNavigate } from 'react-router-dom';
import { setRouter } from './utils/router';

function App() {
  const navigate = useNavigate();
  
  useEffect(() => {
    setRouter(navigate);
  }, [navigate]);

  return <>...</>;
}

3、使用案例

//导入
import { router } from '../utils/router';

// 使用
router.navigate('/login'); // 跳转到登录页