React如何配置特定路由及实现404页面重定向

一、实现精准路由匹配 #

在React Router v6中，路由采用按顺序排他性匹配规则——匹配到第一个符合条件的路由后就会停止匹配。针对你的现有配置，需要调整路由顺序或使用index路由来确保精准匹配：

方案1：调整路由顺序（基础场景） #

将更具体的路由放在前面，根路由放在中间，最后放置404路由：

import { Routes, Route } from 'react-router-dom';
import HomePage from './HomePage';
import UserPage from './UserPage';
import NotFoundPage from './NotFoundPage'; // 导入自定义404组件

function App() {
  return (
    <Routes>
      {/* 具体路由优先匹配 */}
      <Route path='/User' element={<UserPage />} />
      {/* 仅匹配精确的根路径 '/' */}
      <Route path='/' element={<HomePage />} />
      {/* 匹配所有未定义的路径 */}
      <Route path='*' element={<NotFoundPage />} />
    </Routes>
  );
}

方案2：使用index路由（嵌套布局场景） #

如果项目有统一布局组件，用index路由可以更清晰地指定根路径的精准匹配：

import { Routes, Route } from 'react-router-dom';
import Layout from './Layout';
import HomePage from './HomePage';
import UserPage from './UserPage';
import NotFoundPage from './NotFoundPage';

function App() {
  return (
    <Routes>
      <Route path='/' element={<Layout />}>
        {/* index路由仅匹配父路由的精确路径 '/' */}
        <Route index element={<HomePage />} />
        <Route path='User' element={<UserPage />} />
        {/* 匹配所有未定义的子路径 */}
        <Route path='*' element={<NotFoundPage />} />
      </Route>
    </Routes>
  );
}

二、实现404页面重定向 #

处理未定义URL的核心是添加path='*'的兜底路由，且必须放在所有路由的最后，它会匹配任何未被前面路由命中的路径。

自定义NotFoundPage示例 #

// NotFoundPage.jsx
export default function NotFoundPage() {
  return (
    <div style={{ textAlign: 'center', padding: '50px' }}>
      <h1>404</h1>
      <p>页面未找到</p>
      {/* 可添加返回首页的跳转链接 */}
      <a href='/'>返回首页</a>
    </div>
  );
}

可选：直接重定向到首页 #

如果不需要展示404页面，可使用Navigate组件直接重定向到首页：

import { Navigate } from 'react-router-dom';

// 将兜底路由替换为：
<Route path='*' element={<Navigate to='/' replace />} />

replace属性会替换当前历史记录，避免用户点击返回按钮时再次进入404路径。

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