如何在React Router 6中正确实现404页面重定向？

你遇到的安全报错通常是两种情况导致的：一是未给<Navigate>设置replace属性，导致历史栈无限插入重定向记录触发浏览器安全拦截；二是通配符路由的匹配顺序错误，和现有路由产生循环重定向。可按照以下方案解决：

方案1：路由表配置方式（推荐） #

如果使用createBrowserRouter配置路由，直接在通配符路由里配置带replace属性的<Navigate>即可，注意通配符路由必须放在路由列表最后：

import { createBrowserRouter, RouterProvider, Navigate } from 'react-router-dom'
import Home from './Home'
import About from './About'
import NotFound from './NotFound'

const router = createBrowserRouter([
  {
    path: '/',
    element: <Home />
  },
  {
    path: '/about',
    element: <About />
  },
  // 404规则放最后
  {
    path: '*',
    // 跳转到首页的写法，必须加replace避免历史栈污染
    element: <Navigate to="/" replace />
    // 如果需要展示专门的404页面无需重定向，直接替换为下行代码即可
    // element: <NotFound />
  }
])

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

方案2：传统组件式路由写法 #

如果使用<Routes>+<Route>的声明式写法，规则和路由表配置一致：

import { Routes, Route, Navigate } from 'react-router-dom'
import Home from './Home'
import About from './About'
import NotFound from './NotFound'

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      {/* 通配符路由放最后 */}
      <Route path="*" element={<Navigate to="/" replace />} />
      {/* 展示404页面的写法 */}
      {/* <Route path="*" element={<NotFound />} /> */}
    </Routes>
  )
}

注意事项 #

• 所有自定义业务路由必须放在通配符404路由之前，否则通配符会优先匹配拦截正常路由，引发循环跳转
• 如果是在权限路由、路由守卫等封装组件内使用重定向，同样需要给<Navigate>添加replace属性，避免连续跳转触发浏览器的跳转次数限制安全报错

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