Router toevoegen in React Router

Na een korte kennismaking met routers, kunnen we er een toevoegen aan de applicatie.

Maar eerst moeten we de template van onze applicatie, die we in de vorige lessen hebben gemaakt, een beetje opruimen. Om precies te zijn - de map src. Gooi de map assets eruit, de bestanden App.css, App.jsx. Kortom, er zouden alleen main.jsx en index.css over moeten blijven.

Open index.css en maak het volledig leeg. Laat het leeg zijn.

Laten we ons nu bezighouden met ons hoofdbestand main.jsx. Het zal deze code bevatten:

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

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

	</React.StrictMode>
);

En nu kunnen we een router toevoegen. We gebruiken BrowserRouter, omdat deze het meest wordt gebruikt in webapplicaties. Laten we de moderne syntax niet vergeten. Laten we een importregel toevoegen:

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

Vervolgens maken we een constante router en creëren we onze BrowserRouter na de importregels. Laten we het zo doen dat op de hoofdpagina een div met de tekst 'Hello Router!' wordt weergegeven. Om dit te doen, specificeren we het pad naar de hoofdpagina en het element dat we willen weergeven:

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

We moeten ook de component RouterProvider toevoegen en de hierboven door ons gemaakte router invoeren. Het accepteert alle routerobjecten, rendert onze applicatie en verbindt andere API's:

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

De volledige code ziet er als volgt uit:

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

Laten we de wijzigingen opslaan. Gefeliciteerd! Onze applicatie geeft geen foutmeldingen meer. Als we het nu starten, dan zullen we op de hoofdpagina in de browser 'Hello Router!' zien.

Gebruik het geleerde materiaal om ervoor te zorgen dat op de hoofdpagina van je applicatie, die je hebt gemaakt in de huiswerkopdrachten voor de vorige lessen, een paragraaf met de tekst 'I'm number one in React!' wordt weergegeven.