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:

function 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ó:

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

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

import Root from './routes/root';

Nyissa meg az előző leckék feladataihoz Ön által létrehozott alkalmazást. Hozzon létre a gyökérmegálló számára egy külön React Root komponenst egy külön root.jsx fájlban, ahogyan azt ebben a leckében leírtuk. Végezze el a módosításokat a main.jsx fájlban.