Creación de una ruta raíz en React Router

A menudo la ruta principal, que lleva a la página inicial, se llama ruta raíz (root route), ya que otras rutas se renderizarán dentro de ella. Es muy conveniente representarla como un componente separado. Por lo tanto, tomemos nuevamente nuestra aplicación y en la carpeta src creemos otra y llamémosla routes. Ahora en esta carpeta creemos el archivo root.jsx para un componente React separado Root. El código en el archivo se verá así:

function Root() {
	return <div>Hello Router!</div>;
}

export default Root;

Y ahora modifiquemos un poco el código del archivo main.jsx, ya que como valor de element ahora pasaremos el componente Root, y su contenido ahora está en un archivo separado root.jsx:

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

No olvidemos la línea de importación con nuestro componente en main.jsx:

import Root from './routes/root';

Abra la aplicación creada por usted en las tareas de lecciones anteriores. Cree para la ruta raíz un componente React separado Root en un archivo separado root.jsx, como se describe en esta lección. Realice los cambios en su main.jsx.