Kreiranje osnovne rute u React Router-u

Glavna ruta, koja vodi na početnu stranicu, često se naziva osnovnom rutom (root route), pošto će se ostale rute prikazivati unutar nje. Vrlo je praktično predstaviti je kao zaseban komponent. Stoga, hajde da ponovo uzmemo našu aplikaciju i u folderu src kreiramo još jedan i nazovemo ga routes. Sada u ovom folderu kreirajmo fajl root.jsx za zaseban React komponent Root. Kod u fajlu će izgledati ovako:

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

export default Root;

A sada hajde da unesemo promene u deo koda fajla main.jsx, pošto kao vrednost element mi sada prosleđujemo komponent Root, a njegov sadržaj se sada nalazi u zasebnom fajlu root.jsx:

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

Ne zaboravimo liniju import-a sa našim komponentom u main.jsx:

import Root from './routes/root';

Otvorite aplikaciju koju ste kreirali u zadacima za prethodne lekcije. Kreirajte za osnovnu rutu zaseban React komponent Root u zasebnom fajlu root.jsx, kao što je opisano u ovoj lekciji. Unesite promene u vaš main.jsx.