如何在React Router中通过按钮点击导航路径？

---

React应用程序通常需要一种方便的方法来根据用户的操作（例如点击按钮）导航不同的路由。然而，执行此类任务的最大障碍是有效地执行导航，而不会重新加载整个页面或破坏单页面应用程序 (SPA) 体验。这篇文章展示了如何在react-router中通过点击按钮有效地导航路径。

先决条件

您需要安装Node.js和您首选的代码编辑器来搭建React开发环境。除此之外，您还需要使用npm或yarn安装react-router-dom。

安装react-router-dom模块

npm install react-router-dom

项目结构

无需创建任何文件或目录，我们将使用默认项目结构。

方法

以下步骤说明了在React应用程序中通过点击按钮在路径上创建功能性导航的基础知识。

步骤1：安装路由功能

第一步是在您的终端安装react-router-dom包以访问React路由功能。您必须将您的应用程序包装在``和``中，以确保您已在整个应用程序中启用了路由。

步骤2：定义路由

在本节中，您的任务将涉及使用已安装的react-router-dom包中的Routes和Route组件来定义React应用程序中的不同路径。为确保一切顺利运行，您应该确保每个路径都映射到一个相应的组件，以便在访问该路由时进行渲染。

步骤3：初始化useNavigate Hook

在您可以导入和使用useNavigate Hook之前，请找到要在其中单击按钮触发导航的组件。本节中的下一步是在按钮的onClick事件中调用navigate('/desired-path')，这将帮助您导航到指定的文件夹。

步骤4：插入内联CSS

如果您想美化React应用程序的外观，建议插入内联CSS样式。内联CSS样式方法不需要安装额外的包。但是，如果您想访问更多样式功能，也可以安装像Styled Components这样的CSS-in-JS库。

示例

在这里，我们创建了一个主页，它导航到“关于”页面，您可以为此创建不同的文件，但这里我们使用单个文件以保持简单。

// File name - App.js
import React from 'react';
import { BrowserRouter as Router, Route, Routes, useNavigate } from 'react-router-dom';

function Home() {
  const navigate = useNavigate();

  const handleNavigation = () => {
    navigate('/about');
  };

  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <h1 style={{ color: '#333', fontFamily: 'Arial' }}>Home Page</h1>
      <button
        style={{
          backgroundColor: '#4CAF50',
          color: 'white',
          border: 'none',
          padding: '10px 20px',
          textAlign: 'center',
          textDecoration: 'none',
          display: 'inline-block',
          fontSize: '16px',
          margin: '10px 2px',
          cursor: 'pointer',
          borderRadius: '5px',
        }}
        onClick={handleNavigation}
      >
        Go to About Page
      </button>
    </div>
  );
}

function About() {
  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <h1 style={{ color: '#333', fontFamily: 'Arial' }}>About Page</h1>
    </div>
  );
}

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

export default App;

输出

在这里您可以看到，我们可以通过点击按钮导航到“关于我们”页面。

结论

在上面的文章中，我们介绍了如何安装react-router-dom包以访问React中的路由功能。我们还介绍了如何使用react-router-dom包创建主页和导航按钮，该按钮将您重定向到“关于”页面。上面的示例旨在让您了解React的基本工作原理。但是，您也可以尝试使用多个页面进行导航功能测试，以便更好地掌握这项技术。