如何使React路由匹配带查询参数的/path/stb路径并渲染指定组件？

看起来你遇到的问题核心是路由匹配顺序以及可能的路由基础配置问题，下面一步步帮你解决：

为什么你的路由没匹配到？ #

首先要明确：React Router 的 Route 匹配时完全忽略查询字符串（就是 URL 里 ? 后面的部分），所以 /path/stb?state=mystate... 和 /path/stb 的路径部分是完全一致的，exact 属性在这里不是问题。真正的问题出在你的 Switch 组件的匹配顺序上！

你当前的代码里，第一个 Route 是 path="/" 且没有加 exact，而 Switch 是从上到下依次匹配，只要找到第一个符合条件的路由就会停止匹配。由于所有 URL 都是以 / 开头的，所以不管你访问 /path/stb 还是其他任何路径，都会先匹配到这个根路由，直接渲染 <App />，根本不会走到后面的 /path/stb 路由。

修复方案 #

1. 调整路由匹配顺序（最关键） #

把更具体的路由放在前面，兜底的根路由放在最后：

import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';

// 注意：这里把 App 组件改名为 AppComponent 避免和外层的 App 函数重名，你可以根据自己的情况调整
function AppComponent() {
  return <div>Root App Component</div>;
}

function Home() {
  return <div>Home Page</div>;
}

function App() {
  return (
    <Router>
      <Switch>
        {/* 先匹配具体的 /path/stb 路由 */}
        <Route exact path="/path/stb" render={() => <Home />} />
        {/* 最后匹配根路由作为兜底 */}
        <Route path="/" render={() => <AppComponent />} />
      </Switch>
    </Router>
  );
}

2. （可选）给根路由加上 exact 属性 #

如果不想调整顺序，也可以给根路由加上 exact，这样只有访问严格的 / 路径时才会匹配它：

<Router>
  <Switch>
    <Route exact path="/" render={() => <App />} />
    <Route exact path="/path/stb" render={() => <Home />} />
  </Switch>
</Router>

不过更推荐第一种调整顺序的方式，因为当你有更多路由时，维护起来更清晰。

额外：如何获取 URL 里的查询参数？ #

如果你需要用到 state、bite 这些查询参数，可以在 Home 组件里用 useLocation 钩子来解析：

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

function Home() {
  const location = useLocation();
  // 解析查询字符串
  const queryParams = new URLSearchParams(location.search);
  
  // 获取具体参数
  const state = queryParams.get('state');
  const bite = queryParams.get('bite');
  // 把字符串的 "true"/"false" 转换为布尔值
  const local = queryParams.get('local') === 'true';

  return (
    <div>
      <h1>Home Page</h1>
      <p>State: {state}</p>
      <p>Bite: {bite}</p>
      <p>Local Mode: {local ? 'On' : 'Off'}</p>
    </div>
  );
}

其他可能的排查点 #

• Router 类型错误：如果你用的是 HashRouter，那么 URL 里需要有 #（比如 www.url.com/#/path/stb），如果你的 URL 没有 #，请确保使用 BrowserRouter。
• React Router 版本差异：如果你用的是 v6 版本，Switch 已经被 Routes 替代，写法略有不同：

  import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
  
  function App() {
    return (
      <Router>
        <Routes>
          <Route path="/path/stb" element={<Home />} />
          <Route path="/" element={<AppComponent />} />
        </Routes>
      </Router>
    );
  }
  

  v6 里默认就是精确匹配，不需要加 exact 属性。

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