React Router 6与MirageJS配合时重定向报错问题排查

问题场景 #

在开发Vanlife应用（基于React Router 6课程）时，使用路由保护工具函数实现未登录重定向，原本功能正常，但引入MirageJS后出现重定向报错。

相关代码如下：

路由保护工具函数（util.js） #

import { redirect } from "react-router";
export async function requireAuth() { 
    const isLoggedIn = false; 
    if (!isLoggedIn) { 
        throw redirect("/login");     
    }
}

App.jsx 路由配置 #

import { requireAuth } from "./utils";

export default function App(){
const router = createBrowserRouter(createRoutesFromElements(
    <Route path="/" element={<Layout />}>
        <Route path="login" element={<Login />} />
        <Route path="host" element={<HostLayout />}>  
             <Route loader={async () => await requireAuth()} index element={<Dashboard/>}/> 
        </Route> 
    </Route> 
))}

引入MirageJS后触发错误：

原因分析 #

MirageJS默认会拦截所有浏览器发起的fetch请求，包括React Router内部用于处理导航、重定向的底层请求。这导致requireAuth中抛出的redirect异常无法被React Router的路由系统正确捕获和处理，进而触发错误边界报错。

解决方案 #

配置MirageJS仅拦截你需要模拟的API请求，排除React Router的路由导航请求。通过passthrough方法让非API路径的请求直接绕过Mirage拦截：

import { createServer } from "miragejs";

createServer({
  routes() {
    // 示例1：指定允许通过的路由路径（根据你的实际路由调整）
    this.passthrough("/login", "/host", "/host/**");
    
    // 示例2：更通用的方式，只拦截/api开头的API请求
    this.passthrough(request => !request.url.startsWith("/api"));
    
    // 你的Mirage API路由定义...
    this.get("/api/vans", () => {
      // 返回模拟数据
    });
  }
});

这样配置后，React Router的重定向导航请求不会被Mirage拦截，redirect抛出的异常能被路由系统正常处理，完成未登录跳转到登录页的逻辑。

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