如何使用React Route发送和接收数据？

React Router 发送和接收数据

基础概念

React Router 是 React 应用中用于管理路由的库。它允许你在不同的 URL 路径之间导航，并且可以在这些路径之间传递数据。

类型

Browser Router：用于在浏览器环境中进行路由管理。
Hash Router：使用 URL 的哈希部分进行路由管理，适用于不支持 HTML5 History API 的环境。
Memory Router：在内存中进行路由管理，适用于服务器渲染或无浏览器环境。

应用场景

单页应用（SPA）中的页面导航和路由管理。
根据不同的 URL 参数加载不同的组件和数据。
实现复杂的页面结构和嵌套路由。

发送数据

可以通过以下几种方式在 React Router 中发送数据：

URL 参数：通过 URL 的查询参数传递数据。
状态管理：使用 Redux 或 Context API 等状态管理库在组件之间共享数据。
路由状态：使用 useLocation 和 useNavigate 钩子在 React Router v6 中传递数据。

示例代码：使用 URL 参数传递数据

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

function App() {
  return (
    <Router>
      <div>
        <Link to="/user/123">Go to User 123</Link>
        <Route path="/user/:id" element={<User />} />
      </div>
    </Router>
  );
}

function User() {
  const { id } = useParams();
  return <div>User ID: {id}</div>;
}

接收数据

可以通过以下几种方式在 React Router 中接收数据：

URL 参数：使用 useParams 钩子获取 URL 参数。
路由状态：使用 useLocation 钩子获取路由状态。
状态管理：从 Redux 或 Context API 中获取共享数据。

示例代码：接收 URL 参数

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

function User() {
  const { id } = useParams();
  return <div>User ID: {id}</div>;
}

遇到的问题及解决方法

问题：如何在 React Router v6 中传递复杂数据？

原因：React Router v6 中不再支持 state 属性传递复杂数据。

解决方法：可以使用 useNavigate 钩子结合 URLSearchParams 或自定义查询参数来传递复杂数据。

示例代码：使用 `useNavigate` 传递复杂数据

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

function Home() {
  const navigate = useNavigate();

  const handleClick = () => {
    const data = { name: 'John', age: 30 };
    const params = new URLSearchParams(data).toString();
    navigate(`/user?data=${params}`);
  };

  return (
    <div>
      <button onClick={handleClick}>Go to User</button>
    </div>
  );
}

function User() {
  const location = useLocation();
  const params = new URLSearchParams(location.search);
  const data = params.get('data');
  const parsedData = JSON.parse(decodeURIComponent(data));

  return (
    <div>
      <div>Name: {parsedData.name}</div>
      <div>Age: {parsedData.age}</div>
    </div>
  );
}