React Route无法匹配带query字符串路径 如何按查询参数渲染对应组件

React Router 的path配置仅匹配URL的路径段，不会识别?后的查询参数，所以你把/?type=admin直接写到path字段里的写法不会生效，访问对应地址时始终会命中/路径对应的Home组件。

完全基于前端逻辑处理，不需要调用服务端API，根据你使用的React Router版本选择对应写法即可：

React Router v5 写法 #

<BrowserRouter>
  <Switch>
    <Route 
      exact 
      path="/" 
      render={({location}) => {
        // 解析查询参数
        const searchParams = new URLSearchParams(location.search);
        return searchParams.get('type') === 'admin' ? <Admin /> : <Home />
      }} 
    />
  </Switch>
</BrowserRouter>

React Router v6 写法 #

v6版本移除了Switch组件和render属性，需要单独封装入口组件判断：

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

// 根路径入口组件
function RootEntry() {
  const { search } = useLocation();
  const searchParams = new URLSearchParams(search);
  return searchParams.get('type') === 'admin' ? <Admin /> : <Home />
}

// 路由配置
function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<RootEntry />} />
      </Routes>
    </BrowserRouter>
  )
}

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