如何通过在反应路由器中单击按钮来导航路径？

在本文中，我们将看到如何通过 react.js 中的按钮组件导航到另一个路由。

方法：要通过单击按钮导航到另一个页面，我们将使用 useHistory 挂钩。

UseHistory hook：这个方法让你可以访问 React Router 的历史实例。这允许您通过历史实例将用户重定向到不同的页面。

历史对象由以下属性和方法组成：

• 长度：历史堆栈中的条目数
• 操作：当前操作（PUSH、REPLACE 等）。 Push(path, [state]) – 向历史堆栈添加一个新条目。
• 位置：当前位置。

为了更好地理解，我们将创建一个计算机科学门户应用程序，其中包含一个主页和另一个页面，可以深入了解所提供的课程。通过点击主页上的按钮，您可以浏览课程，在另一条路线上展示，并返回主页。

下面是分步实现。

第 1 步：创建一个项目目录，前往终端，并使用以下命令创建一个名为“ cs portal ”的 React 应用程序。

npx create-react-app cs-portal 

创建 cs 门户应用程序后，您将在终端中看到以下成功消息，您就可以开始了。通过键入以下命令切换到新文件夹“cs portal”：

cd cs-portal 

第 2 步：修改您的项目结构。目录结构目前看起来像这样

默认目录结构

我们将修改文件夹并保留此示例所需的文件。现在，确保你的文件结构看起来像这样

目录结构

这是最终项目结构的外观：

最终项目结构

第 3 步：在您的index.html文件中包含以下代码，该文件位于项目目录的公共文件夹中。我们将使用引导程序来构建我们的组件。

HTML

  

    
    
    
    
    
    React App

  

    
    
    
    
    
    
    
    
        

  

第 4 步：在 src 文件夹中添加一个名为components的新文件夹。我们将向此文件夹添加组件。在 components 文件夹中，创建一个新文件Navbar.js ，我们将在其中放置导航栏的代码。您可以选择您选择的任何徽标并自定义导航栏。我在导航栏中使用了 geeksforgeeks 徽标。

将此代码写入您的Navbar.js文件：

导航栏.js

import React from "react";
  
function Navbar() {
    return (
        

            

                
            
        
    );
}
  
export default Navbar;

第 5 步：在这一步中，我们将创建Homepage 组件。创建一个名为Homepage.js的新文件并编写以下代码。我们的主页是使用 Bootstrap Jumbotron 元素构建的。它是指用于突出显示特殊内容或信息的大框。您将看到有关 CS 门户的一些信息，例如 geeksforgeeks。此外，在盒子的最后，有一个按钮可以带你到另一条路线。要在我们的项目中使用 useHistory 钩子，我们首先需要使用 npm 安装 react-router-dom。

npm i react-router-dom 

安装 react-router-dom

然后我们将 useHistory 钩子导入到我们的 Homepage 组件中

import { useHistory } from "react-router-dom";

要导航到课程路线，我们将使用useHistory对象的history.push方法。我们将为我们的按钮组件添加一个事件处理程序“onClick” ，并定义一个处理单击事件的函数“coursesPage” 。 coursesPage函数使我们能够在单击按钮时重定向到另一条路线。

主页.js

import React from 'react'
import { useHistory } from "react-router-dom";
import "../App.css";
  
function Homepage() {
    const history = useHistory();
  
    const coursesPage = () => {
        history.push("/courses")
    }
    return (
        <>
  
            

                
Hello,Geeks
                

                    Geeks for Geeks is a Computer Science portal.  
                    It contains well written, well thought and well 
                    explained computer science and programming articles
                
  
                

                

                    Real-time Live and self paced courses carefully
                    curated for you !
                
  
                

                    Explore Courses
                    
                
  
            
        
    )
}
  
export default Homepage

第6步：现在，我们将创建我们的课程组件。它由一张列出所有课程的卡片和一个返回主页的按钮组成。创建一个新文件Courses.js并在其中写入以下代码。

Javascript

import React from 'react'
import "../App.css";
import { useHistory } from "react-router-dom";
  
function Courses() {
    const history = useHistory();
    const home = () => {
        history.push("/");
    }
    return (
        <>
            

                
Courses 
                

                    

                        Data Structures & Algorithms
                    
                    

                        Competitive Programming
                    
                    

                        Full Stack Development
                    
                    

                        Java Backend
                    
                
            
            
                Back to Home
            
        
    )
}
  
export default Courses

第 7 步：现在，让我们为组件设置样式。在App.css文件中编写以下代码。

应用程序.css

* {
    text-align: center;
}
  
.logo {
    margin: auto
}
  
.jumbotron {
    margin: 100px auto;
    max-width: 50%;
    text-align: center;
}
  
.card {
    width: 18rem;
    margin: 100px auto;
}

第 8 步：从App.js文件中删除现有代码并将其替换为以下代码以呈现组件。我们将使用react-router dom进行基本路由。主页和课程页面都将具有导航栏组件。我们将使用 V5 react-router 中提供的 switch、route 方法为主页和课程提供单独的路由。这将呈现与确切路径匹配的组件。

应用程序.js

import React from 'react';
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link
} from "react-router-dom";
import Homepage from "./Components/Homepage"
import Courses from "./Components/Courses"
  
import './App.css';
import Navbar from './Components/Navbar';
  
function App() {
    return (
        <>
            
            
                
                    
  
                    
                
            
        
    );
}
  
export default App;

第 9 步：您的index.js文件应如下所示。 index.js 文件作为主要入口点，其中 App.js 文件在 DOM 的根 ID 处呈现。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
  
ReactDOM.render(
    , document.getElementById('root')
);

运行应用程序的步骤：现在让我们使用以下命令运行我们的应用程序。

npm start 

输出：默认情况下，React 项目将在端口 3000上运行。您可以在浏览器上的 localhost:3000 访问它。

工作代码输出

您可以观看 geeksforgeeks 视频以了解有关 react.js 路由的更多信息。

&list=PLqM7alHXFySGUg_8Ac5yqZy2_1V-V1Py5&index=10