Útválasztó hozzáadása a React Routerhoz

Miután egy kicsit megismerkedtünk az útválasztókkal, hozzáadhatunk egyet az alkalmazáshoz.

De először egy kicsit takarítanunk kell az alkalmazás sablonján, amelyet az előző órákon hoztunk létre. Pontosabban a src mappával foglalkozunk. Dobja ki belőle a assets mappát, a fájlokat App.css, App.jsx. Összességében csak main.jsx és index.css marad.

Nyissa meg a index.css fájlt és teljesen tisztítsa meg. Hagyja üresen.

Most foglalkozzunk a fő fájlunkkal, main.jsx. Ez lesz benne a kód:

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

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

	</React.StrictMode>
);

És most hozzáadhatjuk az útválasztót. A BrowserRouter-t fogjuk használni, mivel ezt leggyakrabban használják webalkalmazásokban. Ne felejtsük el a modern szintaxist sem. Adjuk hozzá az import sort:

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

Ezután hozzunk létre egy router konstanst és hozzuk létre a BrowserRouter-ünket az import sorok után. Úgy csináljuk, hogy a főoldalon egy div jelenjen meg a 'Hello Router!' felirattal. Ehhez írjuk be a főoldal elérési útját és a megjeleníteni kívánt elemet:

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

Még hozzá kell adnunk a RouterProvider komponenst és be kell illesztenünk a fent létrehozott útválasztónkat. Ez fogadja az összes útválasztó objektumot, rendereli a alkalmazásunkat és csatlakoztatja a többi API-t:

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

A teljes kód így fog kinézni:

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

Mentsük el a változtatásokat. Gratulálok! A alkalmazásunk már nem hibázod. Most, ha elindítjuk, akkor a főoldalon a böngészőben a 'Hello Router!' fog megjelenni.

A megadott anyag felhasználásával érje el, hogy a főoldalon az ön alkalmazásában, amelyet az előző leckék házi feladataihoz készített, egy bekezdés jelenjen meg a 'I'm number one in React!' szöveggel.