'{Link}'和'{useNavigate}'在'react-router-dom'中有什么区别？

Question

能否有人解释一下 {Link} 和 {useNavigate} 两者在 'react-router-dom' 中的区别？我是 React 的新手，我看到这两个都用于路由导航。那么它们有什么不同呢？

- Tanh

Answer 1

Link组件（以及NavLink和Navigate）和由useNavigate钩子返回的navigate函数之间的区别，实际上就是声明式和命令式编程之间的差异。

声明式 vs 命令式编程

声明式编程是一种范型，描述程序在不显式指定其控制流的情况下做什么。 命令式编程是一种范型，通过逐步显式指定每个指令（或语句）来描述程序应该如何执行某些操作，从而改变程序的状态。

• 命令式编程 - 重点关注如何执行，将控制流定义为改变程序状态的语句。
• 声明式编程 - 重点关注要执行什么，定义程序逻辑，但不涉及详细的控制流程。

使用Link（以及NavLink和Navigate）组件，您可以有效地声明或延迟要执行的操作，组件会处理并执行它们。这些是声明式导航操作。

声明式链接示例：

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

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

使用navigate函数，您正在明确发布一个立即导航的命令。这是一项命令性的操作。

命令性链接的示例：

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

这个版本明确解释了如果点击运行，则会运行特定的逻辑以导航到该页面。

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

- Drew Reese

---

请问您能告诉我每个案例的使用方式吗？ - Emad Baqeri

@EmadBaqeri 你需要特定的例子吗？除了API参考文档中已经涵盖的内容，还有什么需要补充的吗？ - Drew Reese

好的，那太棒了。但我正在寻找的是在现实世界的例子中或某些示例中看到这个非常好的解释。 - Emad Baqeri

请使用 Link/NavLink 组件让用户与页面进行交互并导航。使用 Navigate 组件进行重定向 (它是 v5 中 Redirect 组件的后继者)，并在回调函数中使用 navigate 函数，例如 form 元素的 onSubmit 处理程序或在 useEffect 钩子中获取数据后。 - Drew Reese

Answer 2

Link是JSX元素，它替代了<a>标签，在被点击时可以在路由之间导航，而不需要刷新页面。

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

useNavigate是一个路由器钩子（hook）。与Link相似，但它可以在程序中实现路由导航，例如onSubmit会重定向到另一个页面。

  let navigate = useNavigate();

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

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

- Kofusu

Answer 3

Link和NavLink基本上是相同的东西。我们使用它们来路由页面。但不同之处在于，当我们使用NavLink时，我们会获得一些优势，比如我们可以设计我们的导航栏的激活状态。因为NavLink组件内部提供了一个active类。所以当它处于活动状态时，我们可以设计我们的导航栏，并且我们可以跟踪活动页面。

useNavigate是一个钩子，它返回一个函数来进行导航。但是要做到这一点，我们需要调用一个navigate函数，并声明它将如何工作。

- Mohammad Naim

Answer 4

假设您有一些需要在检查某些东西后呈现某个页面的需求（例如，您需要检查用户是否已登录，因此首先检查 web 页面的会话，如果会话有效或存在，则重定向到用户主页，否则告诉用户已经退出）。 这时候 Link 和 useNavigate 的使用案例非常突出。 上述内容的代码如下：

index.js

root.render(
  <BrowserRouter>
    <App/>
</BrowserRouter>
);

App.js

const navigate=useNavigate()  //remember useNavigate only valid inside
    useEffect(()=>{          // BrowserRouter that's why I wrap App.js 
                            //  by BrowserRouter in index.js
        const key=localStorage.getItem('key');
        console.log(key);
        if(key===undefined){
            navigate('/')
        }else{
           navigate('/list')
        }
    },[1])
    return  <Routes>
    <Route path="/" element={<Authentication/>}/>
    <Route path="/list" element={<List/>}/>
    </Routes>

如果我使用Link而不是useNavigate，那么浏览器不会抱怨，但在幕后它不起作用。因为Link只在包含在网页（DOM）内的锚点或HTML页面内的a标签中有效，因为Link与a标签相同。但是useNavigate是一个函数或钩子，可以在代码中的任何位置使用。因为useNavigate不需要添加到DOM中。

- Arghadeep Dey