Dodavanje rutera u React Router

Nakon što smo se malo upoznali sa ruterima, možemo da dodamo jedan u našu aplikaciju.

Ali prvo, moramo da malo počistimo šablon naše aplikacije koji smo kreirali u prethodnim lekcijama. Konkretnije, bavićemo se folderom src. Izbacite iz njega folder assets, fajlove App.css, App.jsx. Ukratko, trebalo bi da vam ostanu samo main.jsx i index.css.

Otvorite index.css i potpuno ga očistite. Neka bude prazan.

Sada ćemo se pozabaviti našim glavnim fajlom main.jsx. U njemu ćemo imati ovakav kod:

import './index.css'
import React from 'react';
import ReactDOM from 'react-dom/client';

ReactDOM.createRoot(document.getElementById('root')).render(
	<React.StrictMode>

	</React.StrictMode>
);

A sada možemo da dodamo ruter. Koristićemo BrowserRouter, pošto se on najčešće koristi u veb aplikacijama. Ne zaboravimo na savremenu sintaksu. Dodajmo liniju za import:

import {
	createBrowserRouter,
	RouterProvider,
} from 'react-router-dom';

Zatim, kreirajmo konstantu router i kreirajmo naš BrowserRouter nakon linija za import. Uradimo to tako da se na glavnoj stranici prikazuje div sa natpisom 'Hello Router!'. Da bismo to uradili, definisaćemo putanju do glavne stranice i element koji će se prikazati:

const router = createBrowserRouter([
	{
		path: '/',
		element: <div>Hello Router!</div>,
	},
]);

Treba nam još da dodamo komponentu RouterProvider i prosledimo joj kreirani ruter iznad. Ona prihvata sve ruter objekte, renderuje našu aplikaciju i povezuje ostale API-je:

ReactDOM.createRoot(document.getElementById('root')).render(
	<React.StrictMode>
		<RouterProvider router={router} />
	</React.StrictMode>
);

Kompletan kod će izgledati ovako:

import './index.css'
import React from 'react';
import ReactDOM from 'react-dom/client';
import {
	createBrowserRouter,
	RouterProvider,
} from 'react-router-dom';

const router = createBrowserRouter([
	{
		path: '/',
		element: <div>Hello world!</div>,
	},
]);

ReactDOM.createRoot(document.getElementById('root')).render(
	<React.StrictMode>
		<RouterProvider router={router} />
	</React.StrictMode>
);

Sačuvajmo promene. Čestitam! Naša aplikacija više ne prijavljuje greške. Sada, ako je pokrenemo, na glavnoj stranici u brauzeru ćemo videti 'Hello Router!'.

Koristeći prikazani materijal, uradite tako da se na glavnoj stranici vaše aplikacije, koju ste kreirali u domaćim zadacima za prethodne lekcije, prikazuje paragraf sa tekstom 'I'm number one in React!'.