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:

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

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

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

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