Att lägga till en router i React Router

Efter att ha lärt känna routrar lite grann, kan vi lägga till en i vår applikation.

Men först behöver vi städa upp lite i mallen för vår applikation, som vi skapade i tidigare lektioner. Mer specifikt - vi ska ta hand om mappen src. Kasta bort mappen assets, filerna App.css, App.jsx. Kort sagt, du ska bara ha kvar main.jsx och index.css.

Öppna index.css och rensa den helt. Låt den vara tom.

Nu ska vi ta hand om vår huvudfil main.jsx. Den kommer att innehålla följande kod:

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

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

	</React.StrictMode>
);

Och nu kan vi lägga till en router. Vi använder BrowserRouter, eftersom den oftast används i webbapplikationer. Låt oss inte glömma modern syntax. Vi lägger till en importrad:

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

Sedan skapar vi en konstant router och skapar vår BrowserRouter efter importraderna. Vi gör så att på hemsidan visas en div med texten 'Hello Router!'. För att göra detta anger vi sökvägen till hemsidan och elementet som ska visas:

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

Vi behöver också lägga till komponenten RouterProvider och skicka in routern vi skapade ovan. Den tar emot alla routerobjekt, renderar vår applikation och ansluter andra API:er:

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

Den fullständiga koden kommer att se ut så här:

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

Spara ändringarna. Grattis! Vår applikation klagar inte längre. Om vi startar den nu kommer vi på hemsidan i webbläsaren att se 'Hello Router!'.

Använd det givna materialet för att se till att på hemsidan i din applikation, som du skapade i hemuppgifterna till tidigare lektioner, visas ett stycke med texten 'I'm number one in React!'.