React Router 与传统路由有何不同？

React Router 是一个用于在 React 应用程序中进行路由的库。它允许您创建路由并从您的组件链接到它们。当用户点击一个链接时，React Router 将决定使用哪个路由并渲染相应的组件。

创建 React 应用程序：首先，我们需要创建一个新的 React.js 项目。我们可以通过运行以下命令来做到这一点：

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

npx create-react-app gfg

第 2 步：创建项目文件夹后，使用以下命令移动到该文件夹。

cd gfg

第 3 步：使用以下命令启动应用程序：

npm run start

项目结构：项目结构如下：

React Router 与传统路由： React Router 是一个提供路由功能的 React 库。它在几个方面不同于传统的路由。

首先，React Router 是声明式的。这意味着您指定您希望路线的外观，而不是指定如何到达那里。这使得它更加用户友好并且更易于阅读。

其次，React Router 是模块化的。这意味着您可以只使用您需要的功能，而不必将所有内容都包含在库中。这使得它更加轻量和高效。

第三，React Router 是异步的。这意味着可以按需加载路由，而不是一次性加载。这使应用程序更具响应性和效率。

第四，React Router 是可组合的。这意味着您可以通过将多个路由组合在一起来创建复杂的路由。这使得路由过程更加灵活。

示例：现在我们将使用 React 路由器在我们的应用程序中添加路由。为此，我们将在“src”文件夹中创建一个新的“pages”目录。在这个新创建的目录中，我们将创建两个 JavaScript 文件“Home.js”和“Data.js”，内容如下。

Home.js

import React from 'react'
import {  Link } from "react-router-dom";
  
export default function Home() {
  return (
      <>
    
Home - GeeksforGeeks
    Data
    
  )
}

数据.js

import React from 'react'
import {  Link } from "react-router-dom";
  
export default function Data() {
  return (
      <>
    
Data
    Home
    
  )
}

现在在“index.js”文件中添加以下内容。

index.js

import ReactDOM from "react-dom";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Data from "./pages/Data";
import Home from "./pages/Home";
  
export default function App() {
  return (
    
      
      } />
        }>
            
        
      
    
  );
}
  
ReactDOM.render(, document.getElementById("root"));

运行应用程序的步骤：在终端中使用以下命令启动应用程序。

npm start

输出：