有人能解释一下"react router dom"中｛Link｝和｛useNavigate｝之间的区别吗？我是React的新手，我看到｛Link｝和｛useNavigate｝都用于导航路线。那么它们有什么不同呢？
Link(和NavLink以及Navigate(组件与useNavigate钩子返回的navigate函数之间的差异实际上与声明性和强制性programming之间的差异相同。
声明式编程与命令式编程
声明式编程是描述WHAT程序在没有明确指定其控制流的情况下执行。强制编程是一种描述HOW程序的范例应该通过显式指定每个指令(或语句(，从而改变程序的状态。
- 强制编程–专注于如何执行，将控制流定义为更改程序状态的语句
- 声明式编程——专注于执行什么，定义程序逻辑，但没有详细的控制流
使用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函数是一个函数，可以在回调中使用。
Link是JSX元素，它取代了<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>;
Link和NavLink基本上是一回事。我们使用它们来路由页面。但不同的是，当我们使用NavLink时，我们获得了一些优势，比如我们可以设计具有活动状态的导航。因为NavLink组件在里面提供了一个活动类。所以我们可以在它处于活动状态时设计导航，并且可以跟踪活动页面。
useNavigate是一个钩子，它返回一个要导航的函数。但要做到这一点，我们需要调用一个导航函数，它声明它将如何工作。
假设您在检查某些内容后需要呈现某个页面(例如，您有检查用户之前是否登录的条件，因此首先检查网页的会话是否有效或存在，然后重定向到用户主页，否则您会告知用户已注销。)这是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>
如果我使用链接而不使用导航，则浏览器不会抱怨但它不能在引擎盖下工作。因为链接只有当您在网页(DOM(中包含锚或html页面中的标签时才有效，因为链接和标签是一样的。但useNavigate是一个函数或钩子，它可以在代码中的任何地方使用。因为useNavigate不需要添加到DOM内部