react获取URL中参数 代码示例

在React应用中，你可以使用JavaScript的内置`URLSearchParams`对象或者`useParams` hook来从URL中获取参数。这里是一个简单的代码示例：

import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';

function MyComponent() {
  const [params, setParams] = useState({});

  // 使用useEffect钩子来处理路由更新并获取参数
  useEffect(() => {
    const urlParams = new URLSearchParams(window.location.search);
    setParams(Object.fromEntries(urlParams.entries()));
  }, [location]);

  return (
    <div>
      {params && params.exampleParam ? (
        <p>Example parameter value: {params.exampleParam}</p>
      ) : (
        <p>No parameters found in the URL.</p>
      )}
    </div>
  );
}

export default MyComponent;

在这个例子中，我们首先导入了`useParams` hook，它返回一个对象，其中包含路由路径中的查询字符串参数。然后我们在`useEffect`中解析URL查询字符串，并将其存储到状态变量`params`中。

注意，这个例子假设你的路由路径有类似`/?exampleParam=value`的形式。如果参数名和值不确定，可以遍历`params`对象来访问它们。