React 路由跳转 Link 的使用：解锁 Link 标签的三种参数传递方式

通过 Link 标签在 React 路由中传递参数

在 React 路由中，Link 标签 是用来在组件之间导航的。除了导航之外，它还可以用来传递参数。本文将介绍三种通过 Link 标签传递参数的方式：props、state 和 query。

Props 参数传递

props 参数传递 是最简单的一种方式，也是最常用的方式。props 是组件的属性，在组件渲染时传递给组件。我们可以通过在 Link 标签中设置 props 属性来传递参数。例如：

<Link to="/about" props={{ name: 'John', age: 30 }}>关于我</Link>

在目标组件中，我们可以使用 props 属性来访问传递过来的参数。例如：

function About(props) {
  const { name, age } = props;
  return (
    <div>
      <h1>关于我</h1>
      <p>我的名字是 {name}，我今年 {age} 岁。</p>
    </div>
  );
}

State 参数传递

state 参数传递 与 props 参数传递类似，也是在组件渲染时传递给组件。但是，state 参数是组件的状态，而不是组件的属性。我们可以通过在 Link 标签中设置 state 属性来传递参数。例如：

<Link to="/about" state={{ name: 'John', age: 30 }}>关于我</Link>

在目标组件中，我们可以使用 state 属性来访问传递过来的参数。例如：

function About(state) {
  const { name, age } = state;
  return (
    <div>
      <h1>关于我</h1>
      <p>我的名字是 {name}，我今年 {age} 岁。</p>
    </div>
  );
}

Query 参数传递

query 参数传递 是通过 URL 查询字符串来传递参数。我们可以通过在 Link 标签中设置 query 属性来传递参数。例如：

<Link to="/about?name=John&age=30">关于我</Link>

在目标组件中，我们可以使用 useLocation 钩子来访问传递过来的参数。例如：

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

function About() {
  const location = useLocation();
  const { name, age } = location.query;
  return (
    <div>
      <h1>关于我</h1>
      <p>我的名字是 {name}，我今年 {age} 岁。</p>
    </div>
  );
}

总结

Link 标签提供了三种参数传递方式：props、state 和 query。每种方式都有其优缺点，我们可以根据不同的情况选择合适的方式来传递参数。

• props 参数传递： 简单易用，只能传递简单的值。
• state 参数传递： 可以传递复杂的对象或函数，使用起来比 props 参数传递复杂。
• query 参数传递： 可以传递任意类型的数据，URL 会变得很长，而且不美观。

常见问题解答

1. 哪种参数传递方式最好？
   这取决于你要传递的数据类型和复杂性。如果要传递简单的值，则 props 参数传递是最好的选择。如果要传递复杂的对象或函数，则 state 参数传递是最好的选择。如果要传递任意类型的数据，则 query 参数传递是最好的选择。
2. 如何访问传递的参数？
   在目标组件中，可以使用 props、state 或 location.query 属性来访问传递过来的参数。
3. 可以传递多个参数吗？
   可以，可以使用对象或数组来传递多个参数。
4. 传递的参数有大小限制吗？
   没有大小限制，但 URL 的长度可能会受到浏览器的限制。
5. 为什么使用 Link 标签而不是直接使用 a 标签？
   Link 标签是 React 路由提供的专门用于导航的组件。它提供了许多好处，例如：
   • 防止页面刷新
   • 支持历史记录管理
   • 允许传递参数