能否有人解释一下 {Link} 和 {useNavigate} 两者在 'react-router-dom' 中的区别?我是 React 的新手,我看到这两个都用于路由导航。那么它们有什么不同呢?
能否有人解释一下 {Link} 和 {useNavigate} 两者在 'react-router-dom' 中的区别?我是 React 的新手,我看到这两个都用于路由导航。那么它们有什么不同呢?
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
函数是一个函数,可以在回调中使用。
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>;
Link和NavLink基本上是相同的东西。我们使用它们来路由页面。但不同之处在于,当我们使用NavLink时,我们会获得一些优势,比如我们可以设计我们的导航栏的激活状态。因为NavLink组件内部提供了一个active类。所以当它处于活动状态时,我们可以设计我们的导航栏,并且我们可以跟踪活动页面。
useNavigate是一个钩子,它返回一个函数来进行导航。但是要做到这一点,我们需要调用一个navigate函数,并声明它将如何工作。
假设您有一些需要在检查某些东西后呈现某个页面的需求(例如,您需要检查用户是否已登录,因此首先检查 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中。
Link
/NavLink
组件让用户与页面进行交互并导航。使用Navigate
组件进行重定向 (它是 v5 中Redirect
组件的后继者),并在回调函数中使用navigate
函数,例如form
元素的onSubmit
处理程序或在useEffect
钩子中获取数据后。 - Drew Reese