React Router中path配置带斜杠后缀时路由不生效问题求助

核心原因大概率为以下三类，可对应场景直接修复：

核心根因（90% 概率） #

你在项目根入口的 BrowserRouter/HashRouter 组件上已经配置了 basename={APP_PREFIX_PATH}，路由组件会自动把配置的 basename 作为路径前缀，此时你在 Route 的 path 属性里重复拼接 APP_PREFIX_PATH，会导致最终匹配的路径变成 /v1/v1/commons，和实际访问的 /v1/commons 不匹配，自然路由失效。

其他可能原因：

• 使用 React Router v6 版本时仍使用 v5 的 Switch、component 等废弃语法，导致路由规则不生效
• Redirect 组件未加 exact 属性，导致路径匹配范围过大，触发异常重定向
• 实际访问路径和配置的路径不匹配

对应场景解决方案 #

场景1：根路由已配置 basename #

直接移除所有 Route、Redirect 配置里的 APP_PREFIX_PATH 前缀，同时给 Redirect 加 exact 属性限制匹配范围即可：

// 根入口配置示例（通常是 src/index.js）
import { BrowserRouter } from 'react-router-dom'

ReactDOM.render(
  <BrowserRouter basename={APP_PREFIX_PATH}>
    <AppViews />
  </BrowserRouter>,
  document.getElementById('root')
)

// 调整后的 AppViews 代码
export const AppViews = () => {
  return (
    <Suspense fallback={<Loading cover="content" />}>
      <Switch>
        <Route
          path="/commons"
          component={lazy(() => import(`./commons`))}
        />
        <Redirect
          exact from="/"
          to="/commons"
        />
      </Switch>
    </Suspense>
  );
};

场景2：根路由未配置 basename #

优先排查实际访问的路径是否和配置的 ${APP_PREFIX_PATH}/commons 完全一致，同时确认使用的是 React Router v5 版本，按如下调整代码：

export const AppViews = () => {
  return (
    <Suspense fallback={<Loading cover="content" />}>
      <Switch>
        <Route
          exact path={`${APP_PREFIX_PATH}/commons`}
          component={lazy(() => import(`./commons`))}
        />
        <Redirect
          exact from={`${APP_PREFIX_PATH}`}
          to={`${APP_PREFIX_PATH}/commons`}
        />
      </Switch>
    </Suspense>
  );
};

场景3：使用 React Router v6 版本 #

v6 已经废弃了 Switch、component、Redirect 等 API，需要调整为新语法：

import { Routes, Route, Navigate } from 'react-router-dom'

const Commons = lazy(() => import(`./commons`))

export const AppViews = () => {
  return (
    <Suspense fallback={<Loading cover="content" />}>
      <Routes>
        {/* 根路由已配置 basename 的写法 */}
        <Route path="/commons" element={<Commons />} />
        <Route path="/" element={<Navigate replace to="/commons" />} />

        {/* 根路由未配置 basename 的写法 */}
        {/* <Route path={`${APP_PREFIX_PATH}/commons`} element={<Commons />} />
        <Route path={`${APP_PREFIX_PATH}`} element={<Navigate replace to={`${APP_PREFIX_PATH}/commons`} />} */}
      </Routes>
    </Suspense>
  );
};

快速排查方法 #

在 AppViews 组件中加入如下代码，打印当前实际的路径，和你配置的 path 做对比即可快速定位问题：

import { useLocation } from 'react-router-dom'

export const AppViews = () => {
  const location = useLocation()
  console.log('当前路径：', location.pathname)
  // 剩余逻辑
}

内容的提问来源于stack exchange，提问作者Uğurcan Uçar