¿En qué se diferencia React Router del enrutamiento convencional?

React Router es una biblioteca para el enrutamiento en aplicaciones React. Le permite crear rutas y vincularlas desde sus componentes. Cuando un usuario hace clic en un enlace, React Router determinará qué ruta usar y renderizará el componente correspondiente.

Creación de la aplicación React: Para comenzar, necesitaremos crear un nuevo proyecto React.js. Esto lo podemos hacer ejecutando el siguiente comando:

Paso 1: Cree una aplicación React usando el siguiente comando.

npx create-react-app gfg

Paso 2: después de crear la carpeta de su proyecto, muévase a ella usando el siguiente comando.

cd gfg

Paso 3: Inicie la aplicación usando el siguiente comando:

npm run start

Estructura del proyecto: A continuación se muestra la estructura del proyecto:

React Router vs Enrutamiento convencional: React Router es una biblioteca para React que proporciona funcionalidad de enrutamiento. Es diferente del enrutamiento convencional en algunos aspectos.

Primero, React Router es declarativo. Esto significa que usted especifica cómo quiere que se vea su ruta, en lugar de especificar cómo llegar allí. Esto lo hace más fácil de usar y más fácil de leer.

En segundo lugar, React Router es modular. Esto significa que puede usar solo las funciones que necesita, en lugar de tener que incluir todo en la biblioteca. Esto lo hace más ligero y eficiente.

En tercer lugar, React Router es asíncrono. Esto significa que las rutas se pueden cargar a pedido, en lugar de todas a la vez. Esto hace que la aplicación sea más receptiva y eficiente.

Cuarto, React Router es componible. Esto significa que puede crear rutas complejas combinando varias rutas juntas. Esto hace que el proceso de enrutamiento sea más flexible.

Ejemplo: ahora vamos a usar el enrutador React para agregar enrutamiento en nuestra aplicación. Para ello, crearemos un nuevo directorio ‘pages’ en nuestra carpeta ‘src’. Dentro de este directorio recién creado, crearemos dos archivos JavaScript ‘Home.js’ y ‘Data.js’ con el siguiente contenido.

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

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

Ahora agregue el siguiente contenido en el archivo ‘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 (
    <BrowserRouter>
      <Routes>
      <Route exact path="/" element={<Home />} />
        <Route path="/data" element={<Data />}>
            
        </Route>
      </Routes>
    </BrowserRouter>
  );
}
  
ReactDOM.render(<App />, document.getElementById("root"));

Pasos para ejecutar la aplicación: Use el siguiente comando en la terminal para iniciar la aplicación.

npm start

Producción: