如何在 Link react 中传递动态 url

在 React 应用程序中，链接通常通过 Link 组件呈现。这个组件有一个 to 属性，可以用来指定链接的目标 URL。在某些情况下，我们需要在 URL 中传递动态参数，比如用户信息、搜索关键字等等。本文将介绍如何在 Link 组件中传递动态的 URL。

使用模板字符串

一种简单的方法是使用模板字符串。模板字符串是 ES6 中的新功能，通过 ${} 进行插值，可以方便地将变量插入到字符串中。例如：

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

const userId = 123;
const url = `/user/${userId}`;

<Link to={url}>用户详情</Link>

在这个例子中，我们将 userId 变量插入到 url 字符串中，然后将其作为 to 属性的值传递给 Link 组件。这种方法非常简单，但是如果 URL 路径比较复杂，就会变得冗长和难以维护。

使用 URLSearchParams

在处理复杂的 URL 参数时，可以使用 URLSearchParams 对象。这个对象可以方便地操作 URL 参数，例如添加、删除和修改参数。例如：

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

const params = new URLSearchParams({
  keyword: 'React',
});

<Link to={{
  pathname: '/search',
  search: `?${params.toString()}`,
}}>搜索</Link>

在这个例子中，我们创建了一个 URLSearchParams 对象，并将 keyword 参数设置为 React。然后，我们将这个参数作为查询字符串添加到 pathname 为 /search 的 URL 上。最后，我们将这个 URL 作为 to 属性的值传递给 Link 组件。

使用 query-string 库

除了 URLSearchParams 外，还有一个叫做 query-string 的库，可以方便地处理 URL 参数。这个库可以将查询字符串转换为对象，也可以将对象转换为查询字符串。例如：

import { Link } from 'react-router-dom';
import queryString from 'query-string';

const params = { keyword: 'React' };
const search = `?${queryString.stringify(params)}`;

<Link to={{
  pathname: '/search',
  search,
}}>搜索</Link>

在这个例子中，我们使用 queryString 库将参数对象转换为查询字符串，并将其作为查询字符串添加到 pathname 为 /search 的 URL 上。最后，我们将这个 URL 作为 to 属性的值传递给 Link 组件。

总结

以上是在 Link 组件中传递动态 URL 的三种方法：使用模板字符串、使用 URLSearchParams 和使用 query-string 库。这些方法都可以实现动态传递参数的效果，可以根据实际情况选择适合自己的方法。