React路由器与其他查询参数相同的路径

基础概念

React Router 是 React 应用中用于实现页面导航和路由管理的库。它允许你在不同的 URL 路径之间进行切换，从而展示不同的组件。当涉及到查询参数（query parameters）时，这些参数通常附加在 URL 的末尾，以 ? 开头，如 https://example.com/path?key=value。

类型

React Router 主要有以下几种类型：

BrowserRouter：基于 HTML5 历史 API 的路由。
HashRouter：基于 URL 哈希值的路由。
MemoryRouter：在内存中维护路由状态，常用于服务器渲染或测试环境。
NativeRouter：用于 React Native 应用的路由。

应用场景

单页应用（SPA）：React Router 是构建单页应用的理想选择，可以实现页面的无刷新切换。
复杂的应用结构：对于具有复杂导航结构的应用，React Router 可以帮助你更好地组织和管理路由。
需要动态加载组件的场景：通过 React Router 可以实现按需加载组件，提高应用的加载速度。

遇到的问题及解决方法

问题：React 路由器与其他查询参数相同的路径

假设你有一个路径 /users，并且你希望在 URL 中添加查询参数，如 /users?key=value。然而，你发现当路径和查询参数相同时，React Router 无法正确解析。

原因：

这通常是因为 React Router 在解析路径时，没有正确处理查询参数。查询参数可能会干扰路由的匹配。

解决方法：

使用 useSearchParams 钩子（适用于 React Router v6 及以上版本）：

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

function Users() {
  const [searchParams] = useSearchParams();
  const key = searchParams.get('key');

  return (
    <div>
      <h1>Users</h1>
      <p>Key: {key}</p>
    </div>
  );
}

function App() {
  return (
    <BrowserRouter>
      <Route path="/users" element={<Users />} />
    </BrowserRouter>
  );
}

手动解析查询参数（适用于 React Router v5 及以下版本）：

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

function Users({ location }) {
  const queryParams = new URLSearchParams(location.search);
  const key = queryParams.get('key');

  return (
    <div>
      <h1>Users</h1>
      <p>Key: {key}</p>
    </div>
  );
}

function App() {
  return (
    <BrowserRouter>
      <Route path="/users" component={Users} />
    </BrowserRouter>
  );
}