¿Qué es React Router DOM?

React Router DOM es una biblioteca de enrutamiento para aplicaciones de React. Permite crear rutas y manejar la navegación entre diferentes componentes de una aplicación de React.

React Router DOM proporciona una forma declarativa de definir las rutas en una aplicación React, lo que significa que puedes definir fácilmente qué componente debe renderizarse en función de la URL actual. Esto es especialmente útil cuando se construyen aplicaciones de una sola página (Single Page Applications) en las que el contenido se actualiza dinámicamente sin necesidad de recargar la página completa.

Instalación

Lo instalamos en la terminal dentro de nuestro proyecto con:

npm install react-router-dom

Uso en React

Luego en nuestro componente principal, src/Pages/APP/index.js creamos nuestra lógica de enrutamiento. Primero importamos dereact-router-dom: useRoutes y BrowserRouter

import { BrowserRouter, useRoutes } from 'react-router-dom';

Luego, afuera del componente funcional App, creamos AppRoutes y ahí usamos la siguiente sintaxis para crear rutas y vincularlas a nuestros componentes:

{ path: ‘nombre-de-la-ruta’, element: <NombreComponente />}

{ path: '/my-account', element: <MyAccount /> },

const AppRoutes = () => {
  let router = useRoutes([
    { path: '/', element: <Home /> },
    { path: '/my-account', element: <MyAccount /> },
    { path: '/my-order', element: <MyOrder /> },
    { path: '/my-orders', element: <MyOrders /> },
    { path: '/sign-in', element: <SignIn /> },
    { path: '/*', element: <NotFound /> }
  ]);

  return router;
}

Ahora procedemos a instanciar el enrutador en el return de nuestro App, con BrowserRouter:

const App = () => {
  return (
    <BrowserRouter>
      <AppRoutes />
    </BrowserRouter>
  )
}