React项目使用react-router-dom绑定URL首段slug时路由异常问题

问题根因 #

1. 路由匹配顺序错误
   <Switch> 组件会按书写顺序匹配第一个符合规则的路由，你将短路径 /:slug 放在最外层Switch的首位，即使加了exact限制，外层路由命中后直接返回首页组件，后续嵌套的/login//signup路由永远不会被触发，本地环境能跑通属于热更新缓存导致的巧合。
2. 重定向路径未填充实际参数
   你写的 Redirect to={'/:slug'} 是硬编码的字面量字符串，React Router 不会自动把路径里的实际slug值填充到这个重定向地址里，只会直接跳转至/:slug这个无效路径。
3. 路由状态和手动获取的slug不同步
   你仅在组件挂载时用window.location获取一次slug，没有监听路由变化更新，也没有使用React Router内置的useLocation/useParams获取参数，很容易出现路由状态和slug变量不一致的问题。
4. 远程主机未配置前端路由 fallback
   本地开发服务器默认开启了history模式的 fallback 规则，所有路径都会返回index.html让前端处理路由；部署到Nginx/Apache等服务端后如果没有对应配置，直接访问/my-subsite/login会直接返回404，根本不会加载你的React应用代码。

修复步骤 #

1. 调整路由结构与匹配顺序 #

把更具体的长路径放在短路径前面，同时调整嵌套逻辑，把公共布局组件放在合适的位置。

2. 修复重定向路径的参数填充 #

用你已经存在的slug变量拼接重定向路径，或者使用React Router的useParams获取当前路径的slug参数。

3. 修正slug获取逻辑 #

添加路由变化监听，使用React Router提供的API获取路径参数，避免和路由状态不同步。

4. 配置服务端路由 fallback #

如果用Nginx部署，在配置文件的server块添加以下规则：

location / {
  try_files $uri $uri/ /index.html;
}

如果用Apache部署，在public目录下添加.htaccess文件开启重写规则。

修正后的代码示例 #

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

const App = ({ isAuth, onSetSlug, slug}) => {
  const location = useLocation()

  // 监听路径变化更新slug，补充依赖项
  useEffect(() => {
    const currentSlug = location.pathname.split('/')[1]
    if (currentSlug) {
      onSetSlug(currentSlug)
    }
  }, [location.pathname, onSetSlug])

  return (
    <Router>
      <div className="App">
        <Suspense fallback={<Loading />}>
          <MainModal />
          <ScrollToTop>
            {!isAuth ? (
              <ContentWrapper
                container
                component="main"
                adaptSidebar={5}
                adaptContent={7}
              >
                <Switch>
                  {/* 把更具体的长路径放前面 */}
                  <Route path={'/:slug/login'} exact component={lazy( () => import('./containers/notAuth/login'))} />
                  <Route path={'/:slug/signup'} exact component={lazy(() => import('./containers/notAuth/signup'))} />
                  <Route path={'/:slug'} exact component={lazy(() => import('./containers/notAuth/home'))} />
                  {/* 用实际的slug变量拼接重定向路径 */}
                  <Redirect to={`/${slug}`} />
                </Switch>
              </ContentWrapper>
            ) : (
              // 已登录的路由逻辑按需补充
              <></>
            )}
          </ScrollToTop>
        </Suspense>
      </div>
     </Router>
)}

如果部分页面不需要ContentWrapper布局，可以把它抽成单独的高阶组件按需包裹对应页面的路由，不要放在Switch里作为非Route/Redirect的子节点，否则会导致Switch匹配逻辑异常。

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