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:

routes/root.jsxfunction 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:

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

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

main.jsximport Root from './routes/root';