如何在 react 路由器中重置location state？

在React Router中，location state 是一种在跳转路由时携带额外数据的方法，它可以帮助我们在组件间传递信息，而不必使用URL参数。有时候，我们需要在某些操作后重置这些状态，确保它不会在用户重新访问同一页面时依旧存在。

如何重置Location State？

有几种方法可以重置location state，这里举两个常用的例子：

方法1: 使用<Link> 或 <NavLink>组件

在使用<Link>或<NavLink>组件进行页面跳转时，可以通过传递state为null或空对象{}来重置状态。例如：

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

function ResetStateButton() {
  return (
    <Link to={{ pathname: "/somepath", state: {} }}>Go to SomePath and reset state</Link>
  );
}

在这个例子中，当用户点击链接时，我们跳转到/somepath并将state设置为空对象，这样在目标组件中接收到的location state就是空的。

方法2: 使用useNavigate 钩子

在React Router v6中，我们可以使用useNavigate来进行编程式导航。当需要重置state时，同样可以传递一个空对象给state参数。

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

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

  function handleClick() {
    navigate("/somepath", { state: {} });
  }

  return (
    <button onClick={handleClick}>Go to SomePath and reset state</button>
  );
}

在这个例子中，我们定义了一个按钮，当点击这个按钮时，执行handleClick函数。在这个函数中，我们通过useNavigate进行了页面跳转，并同时重置了state。

重置状态的实际应用场景

举个具体的例子，假设我们有一个表单提交成功后跳转到成功页面，并带有提交信息的state。用户查看完信息后离开该页面，若他们通过浏览器的后退按钮返回到该页面，为了防止旧的提交信息显示，我们可能需要在离开页面时重置state。在这种情况下，我们可以在组件卸载时使用useNavigate来重置或清除state。

这些方法可以有效地帮助我们管理React应用中的状态跳转逻辑，保持应用的稳定性和用户友好性。