Tworzenie głównej trasy w React Router

Często główną trasę, prowadzącą na stronę główną, nazywa się trasą główną (root route), ponieważ inne trasy będą renderowane wewnątrz niej. Bardzo wygodnie jest przedstawić ją jako osobny komponent. Dlatego weźmy ponownie naszą aplikację i w folderze src utwórzmy jeszcze jeden i nazwijmy go routes. Teraz w tym folderze utwórzmy plik root.jsx dla oddzielnego komponentu React Root. Kod w pliku będzie wyglądał tak:

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

export default Root;

A teraz wprowadźmy zmiany w kawałku kodu pliku main.jsx, ponieważ jako wartość element będziemy teraz przekazywać komponent Root, a jego zawartość znajduje się teraz w osobnym pliku root.jsx:

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

Nie zapomnijmy o linii importu z naszym komponentem w main.jsx:

import Root from './routes/root';

Otwórz aplikację utworzoną przez Ciebie w zadaniach do poprzednich lekcji. Utwórz dla trasy głównej oddzielny komponent React Root w oddzielnym pliku root.jsx, jak opisano w tej lekcji. Wprowadź zmiany w swoim main.jsx.