Maršrutētāja pievienošana React Router

Nelielā iepazīšanās ar maršrutētājiem, mēs varam pievienot vienu no tiem lietojumam.

Bet vispirms mums ir nepieciešams nedaudz izslaucīt mūsu lietojuma veidni, ko mēs izveidojām iepriekšējās nodarbībās. Konkrētāk - nodarbosimies ar mapīti src. Izmest no tās mapi assets, failus App.css, App.jsx. Kopumā, jums paliks tajā tikai main.jsx un index.css.

Atveriet index.css un pilnībā to iztīriet. Lai tas ir tukšs.

Tagad nodarbosimies ar mūsu galveno failu main.jsx. Tajā mums būs šāds kods:

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

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

	</React.StrictMode>
);

Un tagad mēs varam pievienot maršrutētāju. Mēs izmantosim BrowserRouter, jo to visbiežāk izmanto tīmekļa lietojumos. Neaizmirsīsim arī par mūsdienu sintaksi. Pievienosim importa rindiņu:

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

Pēc tam, izveidosim konstantu router un izveidosim mūsu BrowserRouter pēc importa rindiņām. Darīsim to tā, lai galvenajā lapā mums tiktu attēlots div ar uzrakstu 'Hello Router!'. Lai to izdarītu, norādīsim ceļu uz galveno lapu un elementu, kuru vēlamies attēlot:

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

Mums vēl jāpievieno komponents RouterProvider un jāieraksta izveidotais mūsu maršrutētājs. Tas pieņem visus maršrutētāja objektus, renderē mūsu lietojumu un pievieno citas API:

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

Pilns kods izskatīsies šādi:

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

Saglabāsim izmaiņas. Apsveicu! Mūsu lietojums vairs nebrāzma. Tagad, ja mēs to palaidīsim, tad galvenajā lapā pārlūkprogrammā mēs redzēsim 'Hello Router!'.

Izmantojot sniegto materiālu, panāciet, lai galvenajā lapā jūsu lietojuma, ko izveidojāt mājas darbos iepriekšējām nodarbībām, jums tiktu attēlots rindkopa ar tekstu 'I'm number one in React!'.