'react-router-dom' 中的 {Link} 和 {useNavigate} 之间的区别

Question

谁能解释一下“react-router-dom”中的 {Link} 和 {useNavigate} 之间的区别吗？我是 React 新手，我看到 {Link} 和 {useNavigate} 都用于在路线中导航。那么它们有什么不同呢？

Answer 1

Link(和NavLink)Navigate组件与钩子返回的navigate 函数之间的区别实际上与声明性和声明性之间useNavigate的区别相同命令式。

\n

声明式编程与命令式编程

\n

\n

声明式编程是一种描述程序做什么的范例，\n无需显式指定其控制流。\n命令式编程是一种描述如何执行的范例通过逐步显式指定每条指令（或语句）来执行某些操作的范例，这会改变程序的状态。

\n

\n

\n

\n
• 命令式编程 \xe2\x80\x93 专注于如何执行，将控制流定义为改变程序状态的语句。
\n
• 声明式编程 \xe2\x80\x93 侧重于执行什么，定义程序逻辑，但不关注详细的控制流程。
\n

\n

\n

随着Link(和NavLink和Navigate组件，您可以有效地声明或推迟您想要发生的事情，并且该组件负责完成并执行它。这些是声明性导航操作。

\n

声明性链接示例：

\n

<Link to="page">Page</Link>\n

\n

它只指定了它想要到达的目标，但没有解释如何到达那里。

\n

使用该navigate函数，您可以显式发出命令立即导航的这是一项势在必行的行动。

\n

命令式链接示例：

\n

<Link\n  to="page"\n  onClick={(e) => {\n    e.preventDefault();\n    navigate("page");\n  }}\n>\n  Page\n</Link>\n

\n

此版本明确解释了如果单击运行此特定逻辑以导航到此页面。

\n

另请注意，这Link是一个 React 组件，因此它必须作为 React 组件返回的一部分呈现到 DOM 中，而navigate函数是一个函数，可以在回调中使用。

\n

Answer 2

Link 是 JSX 元素，它是 Replace <a>，因此单击时可以在路由之间导航，而无需刷新页面。

<Link to='/about'>To About Page</Link>

useNavigate 是路由器钩子。与 Link 相同，但它可以以编程方式在路由之间导航，如 onSubmit，它将重定向到另一个页面

  let navigate = useNavigate();

  async function handleSubmit(event) {
    event.preventDefault();
    await submitForm(event.target);
    navigate("/success", { replace: true });
  }

  return <form onSubmit={handleSubmit}>{/* ... */}</form>;