useNavigate中的replace选项是用来做什么的？

Question

文档 中说：

可以传递一个 To 值（与 <Link to> 相同的类型），带有可选的第二个 { replace, state } 参数，或者不传递任何内容。

但没有说明它是替换整个历史记录栈还是仅替换当前路由。我不知道。

- sdfsdf

Answer 1

replace选项属性是一个REPLACE导航操作。它是一个重定向，替换历史堆栈中的当前条目，而不是像常规导航一样PUSH一个新条目到顶部。

navigate(path); // PUSH, navigate
navigate(path, { replace: true }); // REPLACE, redirect

useNavigate

useNavigate钩子返回一个函数，让你可以编程式地导航，例如在表单提交后。如果使用replace:true，导航将替换历史堆栈中当前的条目，而不是添加一个新的条目。

- Drew Reese

---

如果想要替换整个历史堆栈，应该如何操作？ - sdfsdf

@sdfsdf 我一时半会儿也不太确定。历史堆栈在浏览器中。某些版本的 history 对象可以告诉您历史堆栈的长度，但我没有看到 RRD 中允许您重置它的任何内容。您可能需要走出 React 并查看 window.history，尽管 History API 似乎也没有公开此功能。 - Drew Reese

替换历史记录中的当前条目有什么意义呢？这是不是相当于我们展示了重定向？如果是，为什么不使用“重定向”函数呢？ - HackerMF

@HackerMF 这取决于使用情况，但在身份验证流程中通常很有用，其中您重定向到登录页面并需要重定向回访问的原始页面，您不希望登录页面保留在历史堆栈中以通过后退导航访问。 useNavigate钩子仅返回一个navigate函数。您可以通过在选项参数中指定replace：true属性来通过REPLACE操作进行“重定向”。 navigate（path，{replace：true}）替换了旧版RRD中的history.replace（path）。 - Drew Reese

Answer 2

您还可以像这样使用它；

import { useLocation, Navigate } from "react-router-dom"

const location = useLocation ()

‹Navigate to="/" state={{ from: location }} replace /›

点击这里查看更多详情：https://reactrouter.com/en/main/hooks/use-location

- elif deniz

---

你的回答可以通过提供更多支持性信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人能够确认你的回答是否正确。你可以在帮助中心找到关于如何撰写好回答的更多信息。 - Community