Criando uma Rota Raiz no React Router

Frequentemente, a rota principal, que leva à página inicial, é chamada de rota raiz (root route), pois outras rotas serão renderizadas dentro dela. É muito útil representá-la como um componente separado. Portanto, vamos pegar novamente nossa aplicação e na pasta src criar mais uma e chamá-la de routes. Agora, nesta pasta, vamos criar o arquivo root.jsx para um componente React separado Root. O código no arquivo ficará assim:

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

export default Root;

E agora vamos fazer alterações no trecho de código do arquivo main.jsx, pois como valor de element agora passaremos o componente Root, e seu conteúdo agora está em um arquivo separado root.jsx:

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

Não vamos esquecer a linha de importação do nosso componente no main.jsx:

import Root from './routes/root';

Abra o aplicativo criado por você nas tarefas das lições anteriores. Crie para a rota raiz um componente React separado Root em um arquivo separado root.jsx, conforme descrito nesta lição. Faça as alterações no seu main.jsx.