React Router匹配带?的URL问题求助：Route无法匹配/?Code

嘿，这个问题我熟！你之所以没法通过path="/?Code"或者转义后的写法匹配/?Code，核心原因是React Router的path属性只匹配URL的「路径部分」，不包含?开头的查询参数。也就是说，/?Code里的路径其实是/，?Code属于查询参数，不是路径的一部分，所以直接写在path里肯定匹配不上~

下面分两种常用的React Router版本给你解决方案：

React Router v5 解决方案 #

你可以把路由的path设为"/"，然后用render属性替代component，在渲染逻辑里检查查询参数是否存在：

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

<Route 
  path="/" 
  exact 
  render={(props) => {
    // 解析查询参数
    const searchParams = new URLSearchParams(props.location.search);
    // 检查是否存在Code参数
    if (searchParams.has('Code')) {
      // 存在则渲染GameBoard组件
      return <GameBoard {...props} />;
    }
    // 不存在的话，可以渲染其他组件或者重定向
    return <HomePage {...props} />;
  }} 
/>

如果你的场景是必须严格匹配?Code（不带参数值），也可以直接判断props.location.search === '?Code'，不过用URLSearchParams更灵活，能兼容?Code=xxx这类带参数值的情况。

React Router v6 解决方案 #

v6里移除了render和component属性，改用element，同时推荐用useLocation钩子来获取路由信息：

首先写一个守卫组件来判断查询参数：

import { useLocation, Navigate } from 'react-router-dom';
import GameBoard from './GameBoard';

const CodeRouteGuard = () => {
  const location = useLocation();
  const searchParams = new URLSearchParams(location.search);

  // 检查Code参数是否存在
  if (searchParams.has('Code')) {
    return <GameBoard />;
  }

  // 不匹配的话重定向到首页或者其他页面
  return <Navigate to="/" />;
};

然后在路由配置里使用这个守卫组件：

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

<Routes>
  <Route path="/" element={<CodeRouteGuard />} />
  {/* 其他路由... */}
</Routes>

额外提醒 #

如果你希望只有当存在Code参数时才渲染GameBoard，其他访问/的情况渲染别的组件，上面的写法完全适用。要是你需要更复杂的参数校验，也可以在守卫逻辑里添加更多判断条件~

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