React Router仅通过查询参数导航失效：路由组件不渲染求助

哦，我知道你遇到的问题了！React Router 的 Route 组件的 path 属性是用来匹配 URL 的路径部分（也就是 ? 前面的那串内容），而不是后面的查询参数。你直接把 ?page=home 这种查询参数写在 path 里，Router 根本识别不出来，这就是为啥 URL 变了但组件没渲染的原因。

别担心，我给你两种解决方案，分别对应 React Router v5 和 v6（看你用的版本选就行）：

如果你用的是 React Router v5 #

首先，我们需要把所有路由的 path 都设为 /（因为你加了 basename="/app"，实际匹配的就是 /app 路径），然后通过解析查询参数来决定渲染哪个组件。

方法1：自定义路由组件处理查询参数

可以写一个高阶组件来封装路由逻辑，这样代码更整洁：

import { Router, Switch, Route, Link, useLocation } from 'react-router-dom';
import queryString from 'query-string'; // 这个库用来解析查询参数，也可以用原生的 URLSearchParams

// 你的组件
function Home() { return <h1>Home Page</h1>; }
function Posts() { return <h1>Posts List</h1>; }
function Post({ match }) { return <h1>Post Detail: {match.params.id}</h1>; }

// 自定义路由组件，用来匹配查询参数
function QueryRoute({ component: Component, page, ...rest }) {
  return (
    <Route
      {...rest}
      render={(props) => {
        // 解析查询参数
        const searchParams = queryString.parse(props.location.search);
        // 判断当前page参数是否匹配
        if (searchParams.page === page) {
          // 如果是post页面，把post_id作为params传递给组件
          if (page === 'post') {
            return <Component {...props} match={{ ...props.match, params: { id: searchParams.post_id } }} />;
          }
          return <Component {...props} />;
        }
        return null;
      }}
    />
  );
}

function AppRouter() {
  return (
    <Router basename="/app">
      <div>
        <Link to="?page=home">Home</Link>
        <Link to="?page=posts">Posts</Link>
        <Link to="?page=post&post_id=123">Post 123</Link>
        
        <Switch>
          <QueryRoute path="/" page="home" component={Home} />
          <QueryRoute path="/" page="posts" component={Posts} />
          <QueryRoute path="/" page="post" component={Post} />
        </Switch>
      </div>
    </Router>
  );
}

方法2：直接在父组件里条件渲染

如果你的路由逻辑不复杂，也可以直接在父组件里获取查询参数，然后手动判断渲染哪个组件：

import { Router, Link, useLocation } from 'react-router-dom';

function Home() { return <h1>Home</h1>; }
function Posts() { return <h1>Posts</h1>; }
function Post() {
  const location = useLocation();
  const postId = new URLSearchParams(location.search).get('post_id');
  return <h1>Post {postId}</h1>;
}

function AppRouter() {
  const location = useLocation();
  const searchParams = new URLSearchParams(location.search);
  const currentPage = searchParams.get('page');

  return (
    <Router basename="/app">
      <div>
        <Link to="?page=home">Home</Link>
        <Link to="?page=posts">Posts</Link>
        <Link to="?page=post&post_id=123">Post 123</Link>
        
        {currentPage === 'home' && <Home />}
        {currentPage === 'posts' && <Posts />}
        {currentPage === 'post' && <Post />}
        {/* 默认渲染首页 */}
        {!currentPage && <Home />}
      </div>
    </Router>
  );
}

如果你用的是 React Router v6 #

v6 里移除了 Switch，改用 Routes，而且新增了 useSearchParams 钩子，用起来更方便：

import { BrowserRouter as Router, Routes, Route, Link, useSearchParams } from 'react-router-dom';

function Home() { return <h1>Home</h1>; }
function Posts() { return <h1>Posts</h1>; }
function Post() {
  const [searchParams] = useSearchParams();
  const postId = searchParams.get('post_id');
  return <h1>Post {postId}</h1>;
}

// 用来根据查询参数渲染对应组件的容器
function PageContainer() {
  const [searchParams] = useSearchParams();
  const currentPage = searchParams.get('page');

  switch(currentPage) {
    case 'home':
      return <Home />;
    case 'posts':
      return <Posts />;
    case 'post':
      return <Post />;
    default:
      return <Home />;
  }
}

function AppRouter() {
  return (
    <Router basename="/app">
      <div>
        <Link to="?page=home">Home</Link>
        <Link to="?page=posts">Posts</Link>
        <Link to="?page=post&post_id=123">Post 123</Link>
        
        <Routes>
          {/* 所有路径都匹配 /app，然后在容器里判断查询参数 */}
          <Route path="/" element={<PageContainer />} />
        </Routes>
      </div>
    </Router>
  );
}

核心要点总结 #

• React Router 的 Route 只会匹配 URL 的路径部分（? 之前的内容），查询参数不属于路径的一部分，所以不能直接写在 path 里。
• 必须通过 location.search（v5）或者 useSearchParams（v6）来获取查询参数，再根据参数值条件渲染组件。
• 如果需要传递参数（比如 post_id），可以直接在组件里读取查询参数，或者通过 props 传递。

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