Adicionando um Roteador no React Router

Tendo nos familiarizado um pouco com os roteadores, podemos adicionar um ao nosso aplicativo.

Mas primeiro, precisamos fazer uma pequena limpeza no template do nosso aplicativo, que criamos nas lições anteriores. Mais especificamente - vamos lidar com a pasta src. Jogue fora a pasta assets, os arquivos App.css, App.jsx. Em resumo, restarão nela apenas o main.jsx e o index.css.

Abra o index.css e limpe-o completamente. Deixe-o vazio.

Agora, vamos trabalhar no nosso arquivo principal main.jsx. Ele terá o seguinte 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>
);

E agora podemos adicionar o roteador. Usaremos o BrowserRouter, pois é o mais comumente usado em aplicações web. Não vamos esquecer a sintaxe moderna. Vamos adicionar a linha de importação:

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

Em seguida, criaremos uma constante router e criaremos nosso BrowserRouter após as linhas de import. Faremos isso para que a página inicial exiba uma div com o texto 'Hello Router!'. Para isso, definiremos o caminho para a página inicial e o elemento que será exibido:

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

Ainda precisamos adicionar o componente RouterProvider e inserir o roteador que criamos acima. Ele aceita todos os objetos do roteador, renderiza nossa aplicação e conecta outras APIs:

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

O código completo ficará assim:

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>
);

Vamos salvar as alterações. Parabéns! Nosso aplicativo não está mais com erros. Agora, se o executarmos, veremos 'Hello Router!' na página inicial do navegador.

Usando o material fornecido, faça com que na página inicial do seu aplicativo, que você criou nas tarefas das lições anteriores, seja exibido um parágrafo com o texto 'I'm number one in React!'.