什么是 react-router-dom ？

React Router DOM 是一个 npm 包，可让您在 Web 应用程序中实现动态路由。它允许您显示页面并允许用户导航它们。它是一个功能齐全的 React 客户端和服务器端路由库。 React Router Dom 用于构建单页应用程序，即具有许多页面或组件但页面从不刷新的应用程序，而是根据 URL 动态获取内容。这个过程称为路由，它是在 React Router Dom 的帮助下实现的。

react-router 的主要优点是，例如，当单击另一个页面的链接时，不必刷新页面。而且，与传统的页面导航相比，它的速度非常快。这意味着用户体验更好，应用程序具有更好的整体性能。

React Router Dom 有许多有用的组件，要创建功能齐全的路由，您需要其中的大部分。

1. Router（通常作为 BrowserRouter 导入）：它是用于存储所有其他组件的父组件。其中的所有内容都将成为路由功能的一部分
2. Switch： Switch 组件用于仅渲染与位置匹配的第一条路由，而不是渲染所有匹配的路由。
3. Route：该组件检查当前 URL 并显示与该确切路径关联的组件。所有路由都放置在交换机组件内。
4. 链接：链接组件用于创建到不同路由的链接。

Route 组件有 2 个参数。第一个是 url 中的路径，第二个是当前 URL 与第一个参数中的路径匹配时显示的组件。

示例：下面是一个示例，其中我们使用 React Router Dom 创建了一个简单的 React 应用程序。该应用程序将包含 4 个页面。即 1 个主页和 3 个示例页面。用户将借助路由和链接在这些页面之间导航。

下面是分步实现：

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

npx create-react-app foldername

第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：

cd foldername

项目结构：您的项目目录可能如下所示。

我们将在src文件夹中的app,js文件中完成大部分工作。

第3步：接下来，使用以下命令安装react router dom

npm install react-router-dom

第 4 步：现在，在 src 中创建一个名为 Components 的新文件夹。在此文件夹中，创建 3 个文件：

1. page1.js
2. page2.js
3. page3.js

将以下代码添加到所有页面：

page1.js

import React from 'react'
  
export default function Page1() {
    return (
        

            
Page 1
        
    )
}

page2.js

import React from 'react'
  
export default function Page2() {
    return (
        

            
Page 2
        
    )
}

page3.js

import React from 'react'
  
export default function Page3() {
    return (
        

            
Page 3
        
    )
}

项目结构：它现在看起来如下所示。

项目目录

第 5 步：现在，在 App.js 中导入演示所需的组件。然后在 App.js 中添加以下代码。这里我们首先导入 3 个页面，然后在 Router 内部添加一个 Switch。 Switch 内部添加了 4 条路由，1 条用于主页，3 条用于其他页面。该列表包含用户可以单击以导航的可单击链接。

应用程序.js

import { BrowserRouter as Router, Route, Link, Switch} 
        from "react-router-dom";
  
// Import the pages
  
import Page1 from "./Components/page1"
import Page2 from "./Components/page2"
import Page3 from "./Components/page3"
  
// Import css
import "./app.css"
  
function App() {
  return (
    

      
        
          Home Page} />
          } />
            } />
          } />
        
        

          

            
Home
            
Page 1
            
Page 2
            
Page 3
          
        
      
    
  );
}
export default App;

第 6 步：您可以使用以下 CSS 改进设计并使应用程序更美观。将它添加到 App.css（如果它不存在，则创建它）。

应用程序.css

* {
    padding: 0;
    margin: 0;
}
  
h1 {
    text-align: center;
    font-size: 45px;
    font-family: Arial, Helvetica, sans-serif;
    color: rgb(6, 0, 32);
    padding: 40px;
}
  
.list {
    display: flex;
    justify-content: center;
    width: 100%;
}
  
.list ul li {
    list-style: none;
    margin: 42px;
    text-align: center;
}
  
a {
    text-decoration: none;
    color: rgb(0, 0, 0);
    font-size: 18px;
    font-family: Arial, Helvetica, sans-serif;
    padding: 14px 25px;
    background-color: transparent;
    border: 2px solid rgb(12, 0, 66);
}
  
a:hover {
    background-color: rgb(12, 0, 66);
    color: rgb(255, 255, 255);
}

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

npm start

输出：