React-Router-Dom 6.9.0中redirect()无法正常跳转问题求助

我在使用React Router Dom（简称RRD）v6.9.0时遇到了redirect()函数的问题。我希望在requireAuth()函数中，当isLoggedIn = false时重定向到登录页面，但实际效果不符合预期（效果见截图）。

我尝试过将函数直接写入loader中，也使用了文档中的new Response()方法，但问题仍未解决。

相关代码 #

package.json

{
  "name": "router",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "miragejs": "^0.1.46",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.9.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@vitejs/plugin-react": "^3.1.0",
    "typescript": "^4.9.3",
    "vite": "^4.2.0"
  }
}

requireAuth() 函数

import { redirect } from "react-router-dom"

export async function requireAuth() {
    const isLoggedIn = false

    if (!isLoggedIn) {
        throw redirect("/login")
    }
}

App.tsx（路由配置）

import HostVans, {loader as hostVansLoader} from "./Pages/Host/HostVans";
import HostVanDetail, {loader as hostVanDetailLoader} from "./Pages/Host/HostVanDetail";
import {requireAuth} from "../utils";

const router = createBrowserRouter(createRoutesFromElements(
    <Route path='/' element={<Layout/>}>
        <Route path='*' element={<Error />}/>
        <Route index element={<Home/>}/>
        <Route path='about' element={<About/>}/>
        <Route path='login' element={<Login/>}/>
        <Route path='vans' element={<Vans/>} loader={vansLoader} errorElement={<Error/>}/>
        <Route path='vans/:id' element={<VanDetail/>} loader={vanDetailLoader}/>
        <Route path='host' element={<HostLayout />}>

            // requireAuth() 应重定向到登录页，但未生效
            <Route index element={<Dashboard />} loader={async () => await requireAuth()}/>

            <Route path="income" element={<Income />}  loader={async () => {
                return null
            }}/>
            <Route path="vans" element={<HostVans/>}  loader={hostVansLoader}/>
            <Route path="vans/:id" element={<HostVanDetail/>}  loader={hostVanDetailLoader}>
                <Route index element={<HostVanInfo/>} loader={async () => {
                    return null
                }}/>
                <Route path="photos" element={<HostVanPhotos/>} loader={async () => {
                    return null
                }}/>
                <Route path="pricing" element={<HostVanPricing/>} loader={async () => {
                    return null
                }}/>
            </Route>
            <Route path="reviews" element={<Reviews />} />
        </Route>

    </Route>
))

const App = () => {
    return (
        <RouterProvider router={router}/>
    )
}

export default App

解决方案 #

问题核心是父路由host未配置errorElement。React Router v6中，当loader抛出redirect或错误时，会沿路由树向上查找最近的带errorElement的路由处理重定向/错误，没有这个配置的话重定向无法触发。

修改步骤：

1. 给host路由添加errorElement，可复用现有<Error />组件：

<Route path='host' element={<HostLayout />} errorElement={<Error />}>

2. 给host下所有需要鉴权的子路由添加requireAuth校验，避免未登录直接访问：

// 示例：给income路由添加鉴权
<Route path="income" element={<Income />} loader={requireAuth}/>

// 示例：给hostVans路由同时保留自身loader和鉴权
<Route path="vans" element={<HostVans/>} loader={async () => {
  await requireAuth();
  return hostVansLoader();
}}/>

3. 你的requireAuth写法是正确的，抛出redirect()是RRD v6 loader中重定向的标准方式，无需改用new Response。

修改完成后，未登录状态下访问host下的页面就能正确重定向到登录页了。

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