React中如何在组件外部的独立函数中实现页面重定向

你当前代码的重定向逻辑不生效，核心原因是<Redirect>是React Router提供的路由组件，只有在React组件的渲染流程中被返回、挂载到DOM树时才会触发跳转逻辑。你在普通的工具函数中返回该组件，没有被任何React组件渲染，因此不会产生任何效果。

推荐使用全局history实例的方案，无需修改业务组件逻辑，适合全局统一处理请求错误跳转的场景，适配React Router v5和v6版本：

1. 首先安装history依赖（如果没有安装的话执行npm install history）
2. 新建独立的history实例文件history.js：

import { createBrowserHistory } from 'history'
export default createBrowserHistory()

3. 替换项目入口的路由组件，绑定全局history：

• 如果你使用React Router v5：

// App.jsx
import { Router } from 'react-router-dom'
import history from './history'

function App() {
  return (
    <Router history={history}>
      {/* 原有项目路由配置 */}
    </Router>
  )
}

• 如果你使用React Router v6：

// App.jsx
import { unstable_HistoryRouter as HistoryRouter } from 'react-router-dom'
import history from './history'

function App() {
  return (
    <HistoryRouter history={history}>
      {/* 原有项目路由配置 */}
    </HistoryRouter>
  )
}

4. 修改httpErrorHandler.js中的跳转逻辑：

import history from './history'

export const redirectError = (command, message, type, path) => {
  if (command === "toast") {
    type(message, {
      position: toast.POSITION.TOP_RIGHT,
    });
  }
  if (command === "redirect") {
    // 调用history实例方法直接跳转，支持push/replace两种跳转模式
    history.push("/laksjdsdlkjsdfkasjhfklsdjh")
  }
};

如果你的项目跳转场景不多，不想维护全局history，也可以在请求层抛出带跳转标识的错误，在调用请求的组件内用路由钩子处理：

1. 修改requestFile.js的错误捕获逻辑：

export const getSomeApis = async () => {
  let data;
  await getApi(URL)
    .then((info) => {
      data = info;
      redirectError ("toast",info.status, "redirect", "Catched it successfully");
    })
    .catch((error) => {
      // 抛出带跳转标识的自定义错误
      throw {
        needRedirect: true,
        path: "/laksjdsdlkjsdfkasjhfklsdjh",
        rawError: error
      }
    });
  if (data) {
    return data;
  }
};

2. 在业务组件中捕获错误处理跳转：

import { useNavigate } from 'react-router-dom'

function BusinessComponent() {
  const navigate = useNavigate()
  
  const fetchData = async () => {
    try {
      await getSomeApis()
    } catch (err) {
      if (err.needRedirect) {
        navigate(err.path)
        // 其他错误处理逻辑
      }
    }
  }
}

注意：不要直接使用window.location.href跳转，会导致整个页面刷新，丢失React应用的全局状态，用户体验较差。

内容的提问来源于stack exchange，提问作者EM_A