Tilføjelse af router i React Router

Efter at have stiftet lidt bekendtskab med routere, kan vi tilføje en af dem til applikationen.

Men først er vi nødt til at rydde lidt op i skabelonen for vores applikation, som vi oprettede i de foregående lektioner. Mere specifikt - vi vil tage os af mappen src. Smid ud af den mappen assets, filerne App.css, App.jsx. Kort sagt, kun main.jsx og index.css skal være tilbage.

Åbn index.css og tøm den helt. Lad den være tom.

Nu skal vi tage os af vores hovedfil main.jsx. Den vil indeholde følgende kode:

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

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

	</React.StrictMode>
);

Og nu kan vi tilføje routeren. Vi vil bruge BrowserRouter, da den er den mest almindeligt anvendte i webapplikationer. Lad os ikke glemme den moderne syntaks. Vi tilføjer en importlinje:

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

Derefter opretter vi en konstant router og skaber vores BrowserRouter efter importlinjerne. Vi gør det sådan, at der på forsiden vises en div med teksten 'Hello Router!'. For at gøre dette angiver vi stien til forsiden og det element, der skal vises:

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

Vi skal også tilføje komponenten RouterProvider og indsætte den router, vi oprettede ovenfor. Den tager imod alle routerobjekter, renderer vores applikation og tilslutter andre API'er:

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

Den fulde kode vil se sådan ud:

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

Gem ændringerne. Tillykke! Vores applikation brokker sig ikke længere. Hvis vi starter den nu, vil vi se 'Hello Router!' på forsiden i browseren.

Brug det præsenterede materiale til at sikre, at der på forsiden af din applikation, som du oprettede i hjemmeopgaverne til de foregående lektioner, vises en paragraf med teksten 'I'm number one in React!'.