最近,在做一个 React/Ruby 项目时,我发现自己在问,“如果我在登录页面上单击这个按钮会很酷,如果登录正确,它会自动将我导航到主页” ?

虽然我们必须在 React 中获取 Ruby 数据库来验证登录,但这种自动链接的想法却让我无法理解。所以...

谷歌!

我很快遇到了 useNavigate() 钩子。

这是完美的! “OnClick” 我想从 Login 组件导航到 ('/Home')。我一直在滚动以了解更多信息。

从页面顶部的“react - router - dom”导入useNavigate()?听起来不错,但这让我想起了建立这个项目的第一天。我专门安装了“npm install react-router-dom@5”。这意味着我故意安装了 V5 而不是当前的 V6。

然后我意识到,useNavigate Hook 是在 React Router V6 中创建的,用于替换之前的 Hook,useHistory()。

我有点失望,我花了这么多时间在 useNavigate() Hook 上,它无法帮助我完成这个项目。但是,我继续使用 useHistory() 的兔子洞,决心让这个自动链接工作。

幸运的是,它们几乎完全相同!

那么 useHistory() 是什么?

“useHistory 钩子让你可以访问历史实例,你可以用它来_导航_。” - v5.reactrouter

与 useNavigate() 类似,我们从页面顶部的“react-router-dom”中导入 useHistory()。

然后我们设置一个变量,'history' 等于 useHistory Hook。

现在我们在组件中拥有了 useHistory() 的力量!

简单的语法是: {history.push('/Which_Route_We_Want')

在上面的代码中,我使用 useState "isSubmitted" 设置了一个布尔语句。如果正确输入了用户名和密码,则将客户端推送到 /Home 页面。如果没有,请继续使用有用的错误消息(未显示)呈现上面的表单。

一旦我弄清楚了使用 useHistory() 的自动链接是多么简单,我就用类似的链接设置了我的页面,如下所示:

请记住在您的 JSX 中添加您的“onClick”侦听器!

这是我关于 useHistory() Hook 的快速指南。希望这有助于将来有人从 useHistory() 中学习,否则我们将注定要重复它😁。

来源

https://v5.reactrouter.com/web/api/Hooks

https://www.geeksforgeeks.org/reactjs-usenavigate-hook/

https://github.com/almickle/Phas3r-FrontEnd