在 React 应用中实现点击链接跳转到另一个 HTML 页面并传递参数

要在 React 应用中实现点击链接跳转到另一个 HTML 页面并传递参数，你可以使用 Link 组件（React Router）或原生的 <a> 标签。这里有两个示例：

方法一：使用 Link 组件

首先，安装 react-router-dom：

npm install react-router-dom

然后，在你的第一个 React 应用中，引入 Link 组件并使用它来创建一个链接：

import React from "react";
import { Link } from "react-router-dom";

function App() {
  return (
    <div>
      <Link to="/second-page?param1=value1¶m2=value2">
        Click me to go to the second page!
      </Link>
    </div>
  );
}

export default App;

在第二个 React 应用中，你需要使用 useLocation hook 获取 URL 查询字符串参数：

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

function SecondPage() {
  const location = useLocation();

  const params = new URLSearchParams(location.search);
  const param1 = params.get("param1");
  const param2 = params.get("param2");

  return (
    <div>
      <p>Param 1: {param1}</p>
      <p>Param 2: {param2}</p>
    </div>
  );
}

export default SecondPage;

方法二：使用原生的 a 标签

在第一个 React 应用中，使用原生的 <a> 标签创建一个链接：

import React from "react";

function App() {
  return (
    <div>
      <a href="http://localhost:3001/second-page?param1=value1¶m2=value2">
        Click me to go to the second page!
      </a>
    </div>
  );
}

export default App;

在第二个 React 应用中，使用 useLocation hook 获取 URL 查询字符串参数：

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

function SecondPage() {
  const location = useLocation();

  const params = new URLSearchParams(location.search);
  const param1 = params.get("param1");
  const param2 = params.get("param2");

  return (
    <div>
      <p>Param 1: {param1}</p>
      <p>Param 2: {param2}</p>
    </div>
  );
}

export default SecondPage;

这两个方法都能达到相同的效果，但在实际项目中，推荐使用第一种方法，因为它提供了更好的路由管理功能。