在本教程中，我们将讨论什么是 React Router 以及如何使用它。然后我们将讨论它的功能以及如何在 React 应用中使用它们来导航和渲染多个组件。

先决条件

• React 应用
• 很好地理解了 React 中的组件。
• Node.js 已安装。

以下是关于如何设置 React Router 并路由到其他组件的交互式脚本：

React 作为单页应用程序（SPA）

在深入研究路由之前，您需要了解 React 应用中页面的呈现方式。本节面向初学者 - 如果您已经了解 SPA 是什么以及它与 React 的关系，则可以跳过本节。

在非单页应用程序中，当您单击浏览器中的链接时，会在呈现 HTML 页面之前向服务器发送请求。

在 React 中，页面内容由我们的组件创建。因此，React Router 所做的就是拦截发送到服务器的请求，然后从我们创建的组件中动态注入内容。

这是 SPA 背后的总体思想，它允许更快地呈现内容而无需刷新页面。

创建新项目时，您始终会 index.html 在公共文件夹中看到一个文件。您在 App 作为根组件的组件中编写的所有代码都会呈现到此 HTML 文件中。这意味着您的代码只会呈现到一个 HTML 文件中。

如果您希望将不同的组件呈现为不同的页面，会发生什么情况？您是否会创建一个新的 HTML 文件？答案是否定的。React Router（顾名思义）可帮助您路由/导航到文件中的新组件并呈现它们 index.html 。

因此，作为单页应用程序，当您使用 React Router 导航到新组件时，将 index.html 使用该组件的逻辑进行重写。

如何安装 React Router

要安装 React Router，您需要做的就是 npm install react-router-dom@6 在项目终端中运行，然后等待安装完成。

如果您使用 yarn，请使用以下命令： yarn add react-router-dom@6 .

如何设置 React Router

安装完成后，要做的第一件事就是让 React Router 在你的应用程序的任何位置可用。

为此，打开 index.js 中的文件 src 并 BrowserRouter 从中 react-router-dom ，然后将根组件（ App 组件）包装在其中。

样子 index.js 如下：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  
    
  ,
  document.getElementById('root')
);

使用 React Router 进行更改后，你应该得到以下结果：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { BrowserRouter } from "react-router-dom";

ReactDOM.render(
  
    
  ,
  document.getElementById("root")
);

我们所做的只是用 替换 React.StrictMode 从 BrowserRouter 导入的 react-router-dom 。现在可以从应用程序的任何部分访问路由器功能。

如何路由到其他组件

我们终于完成了设置，所以现在我们将研究路由和渲染不同的组件。

步骤 1 - 创建多个组件

我们将创建以下内容 Home , About 以及 Contact 如下组件：

function Home() {
  return (
    

      
This is the home page
    
  );
}

export default Home;

import React from 'react'

function About() {
    return (
        

            
This is the about page
        
    )
}

export default About

import React from 'react'

function Contact() {
    return (
        

            
This is the contact page
        
    )
}

export default Contact

第 2 步 - 定义路线

由于该 App 组件充当我们的 React 代码最初渲染的根组件，因此我们将在其中创建所有路由。

如果这没有多大意义，请不要担心——看了下面的例子后你会更好地理解。

import { Routes, Route } from "react-router-dom"
import Home from "./Home"
import About from "./About"
import Contact from "./Contact"

function App() {
  return (
    

      
         } />
         } />
         } />
      
    
  )
}

export default App

我们首先导入了我们将要使用的功能 – Routes 和 Route 。之后，我们导入了我们需要附加路线的所有组件。现在让我们分解一下这个过程。

Routes 充当我们的应用程序中创建的所有单独路线的容器/父级。

Route 用于创建单个路由。它包含两个属性：

• path ，指定所需组件的 URL 路径。您可以随意命名此路径名。上面，您会注意到第一个路径名是反斜杠 (/)。任何路径名为反斜杠的组件在应用程序首次加载时都会首先被渲染。这意味着该 Home 组件将是第一个被渲染的组件。
• element ，指定路由应该渲染的组件。

我们现在所做的就是定义我们的路线及其路径，并将它们附加到各自的组件上。

如果您使用的是版本 5，那么您会注意到我们没有使用 exact 和 switch ，这太棒了。

步骤 3 - 使用 Link 导航至路线

如果您到目前为止一直进行编码而没有任何错误，则您的浏览器应该正在呈现该 Home 组件。

现在，我们将使用不同的 React Router 功能，根据我们在 App 组件中创建的路由和路径名导航到其他页面。即：

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

function Home() {
  return (
    

      
This is the home page
      Click to view our about page
      Click to view our contact page
    
  );
}

export default Home;

该 Link 组件类似于 to 属性指定链接将带您到哪条路径。

回想一下，我们创建了组件中列出的路径名 App ，因此当您单击链接时，它将查看您的路线并使用相应的路径名呈现组件。

在 Link 使用之前 react-router-dom 请务必记住导入

结论

到目前为止，我们已经了解了如何安装、设置和使用 React Router 的基本功能来导航到应用中的不同页面。这几乎涵盖了入门的基础知识，但还有更多更酷的功能。

例如，您可以使用 useNavigate 将用户推送到各个页面，并且您可以使用 useLocation 获取当前 URL。 好的，我们不会在文章的最后开始另一个教程。

React Router 文档 中查看更多功能 .

您可以在 Twitter 上找到我 @ihechikara2 。订阅我的 时事通讯 可获得免费学习资源。

祝你编码愉快！