Gyökérmegálló létrehozása a React Routerben

A főoldalra vezető alapvető útvonalat gyakran gyökérmegállónak (root route) nevezik, mivel a többi útvonal ezen belül jelenik meg. Nagyon kényelmes külön komponensként elképzelni. Ezért fogjuk újra az alkalmazásunkat, és a src mappában hozzunk létre egy újat, nevezzük routes-nek. Most ebben a mappában hozzuk létre a root.jsx fájlt egy külön React Root komponens számára. A fájl kódja így fog kinézni:

routes/root.jsxfunction Root() {
  return <div>Hello Router!</div>;
}

export default Root;

Most pedig végezzük el a módosításokat a main.jsx fájl egy részletében, mivel az element értékeként mostantól a Root komponenst adjuk át, amelynek tartalma most egy külön root.jsx fájlban található:

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

Ne felejtsük el az import sorunkat a komponensünkkel a main.jsx fájlban:

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