Rota Index no React Router

Nesta lição, vamos aprender o que são rotas index.

Para começar, vamos prestar atenção em uma coisa. Quando estamos na página inicial, à direita nós vemos simplesmente uma tela vazia. Isso acontece porque nenhuma das rotas filhas corresponde ao endereço /, e não dissemos o que exibir nesse caso. Nessa situação, para não exibir uma página em branco, podemos usar uma rota index - uma rota filha que não tem um caminho (path), e seu elemento é exibido no Outlet pai quando nenhuma das rotas filhas é correspondida. Com essas rotas, podemos colocar alguma informação, ou estatísticas, ou algo semelhante. Assim como no caso das rotas comuns, elas podem ser usadas para carregar dados.

Vamos criar o arquivo index.jsx na pasta routes, e nele o componente Index:

export default function Index() {
	return (
		<div>
			<p>Olá, React Router!</p>
			<p>Esta é uma aplicação para meus produtos :)</p>
		</div>
	);
}

Agora vamos para o main.jsx e importar nosso componente Index lá:

import Index from './routes/index';

E como primeiro elemento no array children adicionaremos um objeto, onde a propriedade index está definida como true, e como elemento para exibição será nosso componente Index:

{ index: true, element: <Index /> },

Pegue o aplicativo que você criou nas tarefas da lição anterior. Usando os materiais da lição, adicione uma rota index na página inicial com algum texto.