Marsruuteri lisamine React Routeris

Pärast marsruuteritega veidi tutvumist saame ühe neist oma rakendusse lisada.

Kuid kõigepealt peame veidi puhastama oma rakenduse mallivormi, mille lõime eelmistel tundidel. Täpsemalt - tegeleme kaustaga src. Visake sealt välja kaust assets, failid App.css, App.jsx. Üldiselt peaks teile jääma sinna ainult main.jsx ja index.css.

Avage index.css ja puhastage see täielikult. Olgu see tühi.

Nüüd asume oma peamise faili kallale main.jsx. Selles on meil selline kood:

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

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

	</React.StrictMode>
);

Ja nüüd saame lisada marsruuteri. Me kasutame BrowserRouter, kuna seda kasutatakse kõige sagedamini veebirakendustes. Ärme unusta ka kaasaegset süntaksit. Lisame importimisrea:

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

Seejärel loome konstandi router ja loome oma BrowserRouter peale importimisridu. Teeme seda nii, et meie pealehel kuvataks div siltiga 'Hello Router!'. Selleks kirjutame pealehe tee ja elemendi, mida kuvame:

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

Meil on vaja lisada komponent RouterProvider ja sisestada sinna ülal loodud marsruuter. See võtab vastu kõik marsruuteri objektid, renderdab meie rakenduse ja ühendab teised API-d:

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

Täielik kood näeb välja selline:

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

Salvestame muudatused. Palju õnne! Meie rakendus ei kaeba enam. Nüüd, kui me selle käivitame, siis brauseri pealehel me näeme 'Hello Router!'.

Kasutades toodud materjali, tehke nii, et teie rakenduse pealehel, mille lõite eelmiste tundide kodülesannetes, kuvataks teile lõigu tekstiga 'I'm number one in React!'.