Rotas no React Router

As rotas (Routes) são a parte mais crucial de um aplicativo React Router. Vamos considerar um trecho de código da lição anterior:

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

Pois bem, as propriedades do objeto path e element, que passamos para a função ao criar o roteador, são as propriedades do objeto Route. Na verdade, esse objeto tem muitas propriedades, elas podem ser encontradas na documentação oficial. No futuro, algumas delas serão úteis para nós:

interface RouteObject {
	path?: string;
	index?: boolean;
	children?: React.ReactNode;
	caseSensitive?: boolean;
	id?: string;
	loader?: LoaderFunction;
	action?: ActionFunction;
	element?: React.ReactNode | null;
	Component?: React.ComponentType | null;
	errorElement?: React.ReactNode | null;
	ErrorBoundary?: React.ComponentType | null;
	handle?: RouteObject["handle"];
	shouldRevalidate?: ShouldRevalidateFunction;
	lazy?: LazyRouteFunction<RouteObject>;
}

Poderíamos usar o estilo JSX alternativo e escrever as propriedades como props para o componente Route, então nosso trecho de código ficaria assim:

const router = createBrowserRouter(
	createRoutesFromElements(
		<Route
			path = '/'
			element = {<div>Hello Router!</div>}
		/>
	)
);

E, claro, seria necessário adicionar mais algumas linhas na importação:

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

Ambos os estilos apresentados na lição são equivalentes. No futuro, vamos aderir ao primeiro estilo.

Pegue o aplicativo criado por você nas tarefas das lições anteriores. Tente reescrever o trecho de código para a criação do roteador (por enquanto, comente o antigo), usando a sintaxe JSX alternativa, apresentada na lição. Certifique-se de que o aplicativo funciona.

Volte todo o código antigo ao seu lugar, e remova o novo. Certifique-se de que o aplicativo funciona.