React Router 嵌套路由与搜索参数的使用

在 React Router 中，可以使用嵌套路由来组织应用的页面结构，并通过搜索参数传递数据。下面是一个示例，展示了如何使用嵌套路由和搜索参数：

首先，确保你已经安装了 react-router-dom 库。

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

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">首页</Link>
            </li>
            <li>
              <Link to="/users">用户列表</Link>
            </li>
          </ul>
        </nav>

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

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

function Users() {
  return (
    <div>
      <h2>用户列表</h2>
      <ul>
        <li>
          <Link to="/users/1">用户 1</Link>
        </li>
        <li>
          <Link to="/users/2">用户 2</Link>
        </li>
      </ul>
    </div>
  );
}

function UserDetail({ match }) {
  const { id } = match.params;
  return <h2>用户详情 - {id}</h2>;
}

export default App;

在上述示例中，我们定义了三个路由：/、/users 和 /users/:id。/ 路由对应 Home 组件，/users 路由对应 Users 组件，/users/:id 路由对应 UserDetail 组件。

在 Users 组件中，我们使用 Link 组件创建了链接，链接到 /users/:id 路由，并传递了用户的 ID 作为搜索参数。在 UserDetail 组件中，我们使用 match.params 对象获取了搜索参数 id，并在组件中使用它来显示用户详情。

这样，当用户点击 Users 组件中的链接时，React Router 会根据链接的路径和搜索参数来匹配相应的路由，并渲染对应的组件。在 UserDetail 组件中，我们可以根据搜索参数来获取用户的详情数据，并进行相应的处理。