ReactJS useNavigate() 钩子

在 React Router v6 中引入了 useNavigate()钩子来替换 useHistory() 钩子。在早期版本中，useHistory() 钩子访问 React Router 历史对象并使用 push 或 replace 方法导航到其他路由器。它有助于转到特定的 URL、前进或后退页面。在更新版本中，React Router 的新导航 API 提供了一个 useNavigate() 钩子，这是一个命令式版本，用于执行导航操作，具有更好的兼容性。

现在让我们通过示例来了解 useNavigate() 钩子的工作原理。

创建 React 应用程序并安装模块：

第 1 步：首先，使用以下命令创建一个 React 应用程序：

npx create-react-app ;

第 2 步：通过以下方式在 React 应用程序中安装最新版本的 react-router-dom。

npm install react-router-dom

项目结构：在 src 文件夹中创建一个名为 components 的文件夹，并在其中添加文件 Home.js 和 About.js。文件夹结构如下所示：

示例：在此示例中，我们将使用 useNavigate() 挂钩导航到 about 页面并返回主页。从下面的代码中，用户可以通过单击按钮从关于页面返回主页。

Home.js

import React from 'react';
import {useNavigate} from "react-router-dom"
  
const Home = () => {
  const navigate = useNavigate();
    
  return (
      <>
        
GeeksForGeeks
        navigate("/about")}>About
      
  )
};
  
export default Home;

关于.js

import React from 'react';
import {useNavigate} from "react-router-dom"
  
const About = () => {
  const navigate = useNavigate();
  
  return (
  <>
     
A Computer Science portal for geeks.
     navigate(-1)}>Go Back Home
  
  )
};
  
export default About;

注意：这里，数字参数已传递以移动历史堆栈指针。

应用程序.js

import React from "react";
import {BrowserRouter,Routes,Route} from "react-router-dom";
import Home from "./components/Home";
import About from "./components/About";
  
function App() {
    
  return (
      <>
      
      
        }/>
        }/>
      
      
      
  );
}
  
export default App;

运行应用程序的步骤：打开终端并键入以下命令。

npm start

输出：类似地，我们可以传递数字参数以继续前进。

ReactJS useNavigate() 钩子