Legge til en ruter i React Router

Etter å ha blitt litt kjent med rutere, kan vi legge til en i applikasjonen vår.

Men først må vi rydde litt i malen for applikasjonen vår, som vi opprettet i de foregående timene. Mer spesifikt - vi skal ta for oss mappen src. Kast ut mappen assets, filene App.css, App.jsx. Kort sagt, du skal bare ha main.jsx og index.css igjen i den.

Åpne index.css og tøm den helt. La den stå tom.

La oss nå ta hovedfila vår main.jsx. Den skal inneholde 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 nå kan vi legge til ruteren. Vi bruker BrowserRouter, siden den er den mest brukte i webapplikasjoner. La oss ikke glemme moderne syntaks. Vi legger til en import-setning:

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

Deretter oppretter vi en konstant router og oppretter vår BrowserRouter etter import-setningene. Vi gjør det slik at en div med teksten 'Hello Router!' vises på hovedsiden vår. For å gjøre dette skriver vi inn stien til hovedsiden og elementet som skal vises:

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

Vi må også legge til komponenten RouterProvider og skrive inn ruteren vi opprettet ovenfor. Den tar imot alle ruterobjekter, rendrer applikasjonen vår og kobler til andre API-er:

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

Hele koden vil se slik ut:

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 Router!</div>,
	},
]);

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

La oss lagre endringene. Gratulerer! Applikasjonen vår klager ikke lenger. Nå, hvis vi starter den, vil vi se 'Hello Router!' på hovedsiden i nettleseren.

Bruk det oppgitte materialet for å få det til slik at på hovedsiden til applikasjonen din, som du opprettet i hjemmeoppgavene til de foregående timene, vises en avsnitt med teksten 'I'm number one in React!'.