React路由，Link和NavLink的state属性，如何解析传递使用？

我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

本文说的是ReactRouter里面的链接（Link、NavLink）组件，所传递的state，是属于pushState事件里面的state。并不是react组件里面的state，也不是redux里面的state。三者毫无关系，都以state为名，是纯属巧合。

苏南大叔的“程序如此灵动”博客，记录苏南大叔的代码编程经验总结。本文测试环境：nodejs@20.18.0，create-react-app@5.0.1，react-router-dom@6.27.0，react@18.3.1。

接收state

因为传递state这个事情，目前已经有了比较大的分歧。所以，先说如何接收state，这个目前没有任何分歧。可以用作state传递是否成功的标准。

这个接收方法就是useLocation()，在前面的文章里面，已经多次提到过这个钩子了。参考文章：

• https://newsn.net/say/react-router-listen.html
• https://newsn.net/say/react-location.html
• https://newsn.net/say/react-uselocation.html

所以，useLocation()除了能够实时获取pathname外，还能获取这个不常见的state。

import { useLocation } from "react-router-dom";
const Demo = () => {
  const location = useLocation();
  const from = location.state ? location.state.from : ""; // from是预定义state里面的一个key
  //...
}

上面代码中的from，就是state里面的一个key。例如：{from:"China"}。当然这个三元表达式，也可以使用下面这种表述，也可以获得同样的效果。

const from = location.state?.from;

也可以写成

const { state: { from } } = location; // 这种写法容易出错，不建议使用

但是这种写法的前提是：from必然存在，这显然和实际情况不符。很容易报错，不建议使用。

链接传递state

在ReactRouter里面，大体上有三种方法传递state。前两种就是<Link>和<NavLink>。参考文章：

• https://newsn.net/say/react-link.html

前提依然是：在React Router下面的某种router下面使用本文代码。否则就会各种报错。传递参数的方式其实有很多，以前的文章里面，都是在关注Link的to属性，而忽略了state属性。

这里不得不提一句，这些事件本来就叫做pushstate或者popstate或者replacestate，其主角是state。而to这个目标地址，却可能出人意料的喧宾夺主了呢？

import { Link,NavLink } from "react-router-dom";

<Link to="/" state={{ from: "link" }}>Link</Link>

<NavLink to="/" state={{ id: 2, from: "link2" }}>
  NavLink
</NavLink>

网络上广为流传的将pathname和state写在一起，赋值给to的写法。目前无法得到state数据。

在大家通常意义的理解下，这些state应该都是些比较简短的配置信息。但是，据小道消息，说浏览器能接受的最大的state消息体为16M。所以，如果有需求，这个state值也可以设置的多一些。

函数传递state

以前版本的react router，是使用useHistory()来做这件事情的。目前是使用useNavigate()来传递state的。参考代码：

<button onClick={handleClick}>函数跳转</button>

let navigate = useNavigate();
function handleClick(e) {
  navigate("/", { state: { from: "js" } });
}

完整代码

import { Link, NavLink, useNavigate } from "react-router-dom";
import { useLocation } from "react-router-dom";
const Demo = () => {
  // 接受 state
  const location = useLocation();
  const from = location.state?.from;

  // 发送 state
  let navigate = useNavigate();
  function handleClick(e) {
    navigate("/", { state: { from: "js" } });
  }
  return (
    <>
      <div className="bar">
        <Link to="/" state={{ from: "Link" }}>
          Link
        </Link>
        <NavLink to="/" state={{ id: 2, from: "NavLink" }}>
          NavLink
        </NavLink>
        <button onClick={handleClick}>函数跳转</button>
        <Link to={{ pathname: "/", state: { id: 3, from: "拿不到的数据" } }}>
          错误示例
        </Link>
        <NavLink to={{ pathname: "/", state: { id: 4, from: "拿不到的数据" } }}>
          错误示例
        </NavLink>
      </div>
      <h3>{from}</h3>
    </>
  );
};
export default Demo;

结语

目前正确的写法和错误的写法，最大的区别就是：是不是把state写到和pathname写在同一个{}里面。想知道苏南大叔的更多react经验文章么？请参考：

• https://newsn.net/tag/react/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。