React路由器无法使用搜索字符串路由url

基础概念

React Router 是 React 应用中用于实现客户端路由的库。它允许你在不同的组件之间进行导航，而无需重新加载整个页面。URL 搜索字符串（即 ?key=value 部分）通常用于传递查询参数。

类型

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

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

应用场景

React Router 适用于需要单页应用（SPA）的场景，如：

管理后台系统
电子商务网站
社交媒体平台

问题原因及解决方法

问题原因

React Router 默认情况下不会自动解析 URL 中的搜索字符串。你需要手动获取并处理这些查询参数。

解决方法

你可以使用 useLocation 和 useSearchParams 钩子来获取和处理搜索字符串中的参数。

示例代码

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

function App() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about?param=value">About</Link>
          </li>
        </ul>

        <hr />

        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </div>
    </Router>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  const [searchParams] = useSearchParams();
  const param = searchParams.get('param');

  return (
    <div>
      <h2>About</h2>
      <p>Parameter: {param}</p>
    </div>
  );
}

export default App;