Dodajanje usmerjevalnika v React Router

Malo se seznanili z usmerjevalniki, lahko enega dodamo v aplikacijo.

Toda najprej moramo malo počistiti predlogo naše aplikacije, ki smo jo ustvarili v prejšnjih urah. Natančneje - ukvarjali se bomo z mapo src. Vrzite iz nje mapo assets, datoteke App.css, App.jsx. Na splošno, v njej vam bodo ostali le main.jsx in index.css.

Odprite index.css in ga popolnoma očistite. Naj bo prazen.

Zdaj pa se lotimo naše glavne datoteke main.jsx. V njej bomo imeli takšno kodo:

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

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

	</React.StrictMode>
);

In zdaj lahko dodamo usmerjevalnik. Uporabili bomo BrowserRouter, ker se najpogosteje uporablja v spletnih aplikacijah. Ne pozabimo na sodobno sintakso. Dodajmo vrstico uvoza:

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

Nato, ustvarimo konstanto router in ustvarimo naš BrowserRouter po vrsticah z uvozom. Naredimo tako, da se na glavni strani prikaže div z napisom 'Hello Router!'. Za to določimo pot do glavne strani in element, ki ga želimo prikazati:

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

Še dodati moramo komponento RouterProvider in vpisati zgoraj ustvarjeni usmerjevalnik. Sprejme vse objekte usmerjevalnika, upodablja našo aplikacijo in povezuje druge API-je:

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

Polna koda bo videti takole:

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>
);

Shranimo spremembe. Čestitam! Naša aplikacija z vami se ne pritožuje več. Zdaj, če jo zaženemo, potem na glavni strani v brskalniku vidimo 'Hello Router!'.

Z uporabo predstavljenega gradiva poskrbite, da se na glavni strani vaše aplikacije, ki ste jo ustvarili v domačih nalogah za prejšnje lekcije, prikaže odstavek z besedilom 'I'm number one in React!'.