React Router es una biblioteca de React que nos permite poder crear SPAs (Single Page Applications) de forma facil e intuitiva. No abarcaremos en este tutorial la instalacion de la misma porque para eso está la página oficial. Veremos paso a paso como hacer que un router funcione

Crear un router

El primer paso, logicamente, es crear el router. Para eso, despues de instalar react-router-dom debes importar los siguientes modulos

import { createBrowserRouter, RouterProvider } from 'react-router-dom'

Crear las rutas

Perfecto. Ya dimos el primer paso, ahora debemos construir las rutas con las que queremos trabajar. La primera ruta es la ruta raiz, es decir nuestra ruta principal. La creamos con el createBrowserRouter

const router = createBrowserRouter([
  {
    path: "/",
    element: <p>Estoy renderizando algo con React Router</p>,
  },
]);

Lo normal es que en nuestra app en el elemento asignado al path root pongamos nuestra pagina principal de la app.

Agregar el proveedor del router a la app.

Sin el proveedor del router, la app no sabría como reaccionar frente a las diferentes rutas. Es por eso que debemos agregarlo a nuestra app. Generalmente es util agregarlo a nuestra raiz.

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

Manejar errores

Es posible que en tu app el usuario alguna vez quiera dirigirse a una ruta que no existe. El famoso error 404. Vos podes manejar eso con el error handler propio de React Router.

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    errorElement:<ErrorPage />
  },
]);

Veamos un poco en detalle el componente ErrorPage

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

export function ErrorPage() {
  const error = useRouteError();

  return (
    <div id="error-page">
      <h1>Oops!</h1>
      <p>Acá paso un error.</p>
      <p>
        <i>{error.statusText || error.message}</i>
      </p>
    </div>
  );
}

Algo interesante sobre los errores es que cada ruta puede tener su error personalizado. Es por eso que, por ejemplo si queres que el error en una ruta sea diferente podes simplemente pasarle el errorElement a esa ruta. Sin embargo, siempre debes tener un error principal en tu root.

Crear hijos de una ruta

Las rutas pueden tener hijos, es decir, que haya rutas que deriven de otras. Esto se hace generalmente para que, en lugar de redirigir a una pagina nueva, la ruta se renderice en la misma pagina.