如何处理React Router中不匹配basename的分号参数URL请求？

export const AppRoutes: React.FunctionComponent = () => (

return (<Routes>
    ...
    <Route
      path="/instance/:planId"
      element={<TpmPlanInstance />}
    />
    ...
    <Route
      path="*"
      element={
        <BackwardsCompSemiColonParams defaultRedirectPath="/search" />
      }
    />
  </Routes>)

return (<Router basename="/a/b">
      <MatomoRouterTracker />
      <GlobalErrors />
      <AppRoutes />
      {/* 能否在此添加URL重写/重定向逻辑？ */}
    </Router>)

# 解决方案

## 1. 在Router外层提前处理URL（推荐方案）
由于带分号的URL无法匹配`basename="/a/b"`，Router不会渲染任何内部内容，所以必须在**Router组件外部**提前检测并修改路径。可以用`useEffect`结合浏览器原生API实现：

```tsx
import { useEffect } from 'react';
import { Router } from 'react-router-dom';

export const AppWrapper = () => {
  useEffect(() => {
    const fullPath = window.location.pathname + window.location.search + window.location.hash;
    // 匹配 /a/b;planId=xxx 格式的路径
    const planIdMatch = fullPath.match(/^\/a\/b;planId=([^/?#]+)/);
    
    if (planIdMatch) {
      const planId = planIdMatch[1];
      // 构造目标路径，保留原查询参数和哈希
      const targetPath = `/a/b/instance/${planId}${window.location.search}${window.location.hash}`;
      // 使用replaceState避免生成多余的历史记录
      window.history.replaceState(null, '', targetPath);
      // 触发popstate事件通知React Router更新路由
      window.dispatchEvent(new Event('popstate'));
    }
  }, []);

  return (
    <Router basename="/a/b">
      <MatomoRouterTracker />
      <GlobalErrors />
      <AppRoutes />
    </Router>
  );
};

2. 禁止使用多个Router实例 #

React Router不支持同时渲染多个Router，每个Router会维护独立的路由上下文，会导致路由状态混乱，引发各种不可预期的问题，因此这个方案绝对不可行。

3. 备选：直接操作History实例（注意API稳定性） #

如果无法在Router外层处理，可以使用unstable_HistoryRouter（该API标记为不稳定，后续版本可能变更），直接通过History实例拦截并修改路径：

import { unstable_HistoryRouter as HistoryRouter } from 'react-router-dom';
import { createBrowserHistory } from 'history';

const history = createBrowserHistory({
  basename: '/a/b'
});

// 监听路由变化，提前处理异常路径
history.listen(({ location }) => {
  const planIdMatch = location.pathname.match(/^\/a\/b;planId=([^/?#]+)/);
  if (planIdMatch) {
    const planId = planIdMatch[1];
    history.replace({
      pathname: `/a/b/instance/${planId}`,
      search: location.search,
      hash: location.hash
    });
  }
});

export const AppWrapper = () => {
  return (
    <HistoryRouter history={history}>
      <MatomoRouterTracker />
      <GlobalErrors />
      <AppRoutes />
    </HistoryRouter>
  );
};

关键原理说明 #

React Router的basename采用严格前缀匹配，/a/b;planId=xxx并不被视为以/a/b为前缀（分号属于路径的一部分），因此Router会直接跳过内部所有路由的渲染。必须先将路径修改为符合basename规则的格式，才能让Router正常处理后续的路由匹配。

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