在 React-router-dom 中传递数据

React-router-dom 是一个用于 React 应用的路由管理库，它能够使得我们能够轻松地管理前端应用的路由，使得应用变得更加高效和可维护。在 React-router-dom 中，我们可以使用 Link 组件来实现页面之间的跳转。但是，这种跳转方式有些局限性，例如我们可能需要在跳转时将一些数据传递给目标页面，那么如何在 React-router-dom 的链接中传递数据呢？

方法一：使用 URL 参数

一种使用纯 React-router-dom 的方法是通过 URL 参数传递数据。我们可以在 Link 组件的 to 属性中设置一个类似于 /path/:id 的路径，其中 :id 表示一个占位符，我们可以在实际使用过程中将其替换成需要传递的值。例如：

<Link to={`/user/${userId}`}>Go to User Page</Link>

在目标页面中，我们可以通过获取这个占位符来获取传递过来的数据。例如：

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

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

方法二：使用查询参数

另一种传递数据的方式是使用查询参数。我们可以在链接中添加查询参数，例如：

<Link to={{ pathname: "/user", search: `userId=${userId}` }}>Go to User Page</Link>

在目标页面中，我们可以使用 location.search 来获取这个查询参数，例如：

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

function UserPage() {
  const searchParams = new URLSearchParams(useLocation().search);
  const userId = searchParams.get('userId');
  return <div>User ID: {userId}</div>;
}

结论

在 React-router-dom 中传递数据并不难。我们可以使用 URL 参数或查询参数传递数据，并且新版本的 React-router-dom 还提供了更加灵活的方式，例如使用 state 来传递数据。无论是哪种方式，异步组件的懒加载、服务器端渲染等 React-router-dom 的高级特性都是适用的。