react-router query传参数
在React中，React Router 是用于处理路由的库，而 query 参数则通常是通过 URL 中的查询字符串来传递的。在 React Router 中，你可以使用 `useParams` 钩子来获取 URL 中的参数，而对于查询字符串参数，可以使用 `useLocation` 钩子来获取整个 URL 对象，然后解析查询字符串。
以下是一个简单的例子，演示了如何在 React Router 中传递和获取查询字符串参数：
```jsx
import React from 'react';
import { BrowserRouter as Router, Route, Link, useLocation } from 'react-router-dom';
// 组件A，包含一个链接到组件B的路由，并传递了查询字符串参数
const ComponentA = () => {
  return (
    <div>
      <h2>Component A</h2>
      <Link to="/componentB?param1=value1¶m2=value2">Go to Component B</Link>
    </div>
  );
};
// 组件B，使用 useLocation 钩子获取查询字符串参数
const ComponentB = () => {
  const location = useLocation();
  const queryParams = new URLSearchParams(location.search);
  // 获取查询字符串参数的值
  const param1 = ('param1');
  const param2 = ('param2');
  return (
    <div>
      <h2>Component B</h2>
      <p>param1: {param1}</p>
      <p>param2: {param2}</p>
    </div>
  );
};
// 主应用程序组件
const App = () => {
  return (
    <Router>
      <Route path="/componentA" component={ComponentA} />
react router v6 文档      <Route path="/componentB" component={ComponentB} />
    </Router>
  );
};
export default App;
```
在上述例子中，`ComponentA` 包含一个链接，链接到 `ComponentB` 并传递了查询字符串参数。在 `ComponentB` 中，使用 `useLocation` 钩子获取整个 URL 对象，然后通过 `URLSearchParams` 对象解析查询字符串，获取相应的参数值。
注意：上述代码使用的是 React Router v6 的语法，如果你使用的是 React Router v5，语法可能略有不同。确保查看相应版本的文档以获取准确的信息。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。