react 怎么接收url参数

在 React 中，可以通过使用 `react-router-dom` 库中的 `useLocation` hook 来获取 URL 参数。

首先，在需要接收 URL 参数的组件中，需要引入 `useLocation` hook：

import { useLocation } from "react-router-dom";

然后，可以使用 `useLocation` hook 获取当前页面的 URL 参数：

const location = useLocation();
const params = new URLSearchParams(location.search);

这里，`location.search` 返回 URL 中 `?` 后面的查询字符串，例如：`http://example.com/page?param1=value1&param2=value2`，`location.search` 就是 `?param1=value1&param2=value2`。

接着，使用 `URLSearchParams` 类来解析查询字符串，获取参数的值：

const param1 = params.get("param1");
const param2 = params.get("param2");

这样就可以获取到 URL 参数的值了。

相关问题

recat 页面跳转接收url参数

在React应用中，页面跳转并接收URL参数通常通过`useHistory` hook配合路由管理库如React Router来实现。首先，安装所需的依赖，例如`react-router-dom`：

npm install react-router-dom

然后，在组件中，你可以这样做：

import { useHistory } from 'react-router-dom';

function MyComponent() {
  const history = useHistory();

  // 当需要跳转并且传递参数时
  const handleClick = (param) => {
    history.push(`/your-route?param=${param}`);
  };

  return (
    <button onClick={() => handleClick('example')}>点击跳转</button>
  );
}

在这个例子中，当用户点击按钮，会跳转到`/your-route`，并在URL查询字符串中添加名为`param`的键值对，其值为`example`。

在目标页面（例如`YourRoute.js`），你可以使用`useParams`钩子来获取传入的参数：

import { useParams } from 'react-router-dom';

function YourRoute() {
  const { param } = useParams();
  console.log('Received parameter:', param);

  return <div>处理参数...</div>;
}

react接收Link传来的参数

在React中，`Link`组件通常用于导航链接，并且它来自`react-router-dom`库。当你在`Link`组件中传递参数给路由时，这些参数会被自动包含在生成的URL路径中，以便于服务器端解析或前端进行状态管理。

例如，如果你有一个用户详情页面，你可以这样做：

import { Link } from 'react-router-dom';

<Link to={`/users/${userId}`} params={{ userId }}>查看用户</Link>

这里的`params`属性是一个对象，可以存储任意键值对，如`{ userId: '123' }`。当用户点击这个链接时，浏览器地址栏会显示为`/users/123`，并在React Router内部匹配到对应的路由处理函数。

在路由配置中，你可以通过`:paramName`的方式来接收这些参数：

<Route path="/users/:userId" component={UserDetail} />

然后在`UserDetail`组件中，你可以通过`props.match.params`访问这些参数：

function UserDetail({ match }) {
  const userId = match.params.userId;
  // 使用userId做进一步的操作...
}