手机网站建设模板百度seoo优化软件

前言：

        默认你已经进行了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'); // 跳转到登录页