React Router如何添加与基础路径前缀相同的通配符(*)路由

React Router v5 版本 #

• 确保所有路由包裹在Switch组件内，路由按路径精度从高到低排序，精确路径放在前面，模糊匹配的404路由放在最后即可，不需要给所有路由添加exact属性，只有当父级路径可能被子集路径包含时才需要添加。
  代码示例：

import { Switch, Route, Redirect } from 'react-router-dom';
// 引入页面组件
import Home from './pages/Home';
import Profile from './pages/Profile';
import Stores from './pages/Stores';
import Products from './pages/Products';
import NotFound from './pages/NotFound';

function App() {
  return (
    <Switch>
      <Route path="/:lang/profile" component={Profile} exact />
      <Route path="/:lang/stores" component={Stores} exact />
      <Route path="/:lang/products" component={Products} exact />
      <Route path="/:lang" component={Home} exact />
      {/* 匹配所有带语言前缀的无效路径 */}
      <Route path="/:lang/*" component={NotFound} />
      {/* 可选：无语言前缀的路径统一重定向到默认语言首页 */}
      <Route path="*">
        <Redirect to="/zh-CN" replace />
      </Route>
    </Switch>
  );
}

• 常见问题排查：如果还是出现正常路由被404拦截，检查是否把短路径（比如/:lang）放在了长路径（比如/:lang/profile）前面，Switch组件会优先匹配第一个命中的路由，顺序错了就会出现拦截问题。

React Router v6 版本 #

v6 已经移除了exact属性，默认采用精确匹配逻辑，且Routes组件会自动按路径精度排序，不需要手动调整路由顺序，直接按以下写法配置即可：

import { Routes, Route, Navigate } from 'react-router-dom';
// 引入页面组件
import Home from './pages/Home';
import Profile from './pages/Profile';
import Stores from './pages/Stores';
import Products from './pages/Products';
import NotFound from './pages/NotFound';

function App() {
  return (
    <Routes>
      <Route path="/:lang/profile" element={<Profile />} />
      <Route path="/:lang/stores" element={<Stores />} />
      <Route path="/:lang/products" element={<Products />} />
      <Route path="/:lang" element={<Home />} />
      {/* 匹配所有带语言前缀的无效路径 */}
      <Route path="/:lang/*" element={<NotFound />} />
      {/* 无语言前缀的路径统一重定向到默认语言首页 */}
      <Route path="*" element={<Navigate to="/zh-CN" replace />} />
    </Routes>
  );
}

• 注意点：如果是嵌套路由结构，需要在父级路由组件内添加<Outlet />组件渲染子路由内容，否则子路由不会生效。

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