Añadir un router en React Router

Después de familiarizarnos un poco con los routers, podemos añadir uno a la aplicación.

Pero primero necesitamos limpiar un poco la plantilla de nuestra aplicación, que creamos en lecciones anteriores. Concretamente, nos ocuparemos de la carpeta src. Tira a la basura la carpeta assets, los archivos App.css, App.jsx. En resumen, solo te quedarán en ella main.jsx y index.css.

Abre index.css y límpialo completamente. Que quede vacío.

Ahora ocupémonos de nuestro archivo principal main.jsx. En él tendremos este código:

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

ReactDOM.createRoot(document.getElementById('root')).render(
	<React.StrictMode>

	</React.StrictMode>
);

Y ahora podemos añadir el router. Usaremos BrowserRouter, ya que es el más utilizado en aplicaciones web. No nos olvidemos de la sintaxis moderna. Añadamos la línea de importación:

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

Luego, crearemos la constante router y crearemos nuestro BrowserRouter después de las líneas de importación. Hagámoslo para que en la página principal se muestre un div con el texto 'Hello Router!'. Para ello, especificaremos la ruta a la página principal y el elemento que mostraremos:

const router = createBrowserRouter([
	{
		path: '/',
		element: <div>Hello Router!</div>,
	},
]);

Todavía necesitamos añadir el componente RouterProvider e incluir el router que creamos arriba. Este acepta todos los objetos del router, renderiza nuestra aplicación y conecta otras API:

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

El código completo se verá así:

import './index.css'
import React from 'react';
import ReactDOM from 'react-dom/client';
import {
	createBrowserRouter,
	RouterProvider,
} from 'react-router-dom';

const router = createBrowserRouter([
	{
		path: '/',
		element: <div>Hello world!</div>,
	},
]);

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

Guardemos los cambios. ¡Enhorabuena! Nuestra aplicación ya no da errores. Ahora, si la ejecutamos, en la página principal del navegador veremos 'Hello Router!'.

Usando el material proporcionado, haz que en la página principal de tu aplicación, que creaste en las tareas de lecciones anteriores, se muestre un párrafo con el texto 'I'm number one in React!'.