Dodawanie routera w React Router

Po krótkim zapoznaniu się z routerami, możemy dodać jeden z nich do aplikacji.

Ale najpierw musimy nieco posprzątać szablon naszej aplikacji, którą stworzyliśmy na poprzednich zajęciach. A konkretnie - zajmiemy się folderem src. Wyrzućcie z niego folder assets, pliki App.css, App.jsx. Generalnie, zostaną w nim tylko main.jsx i index.css.

Otwórzcie index.css i całkowicie go wyczyśćcie. Niech będzie pusty.

Teraj zajmiemy się naszym głównym plikiem main.jsx. Będzie w nim taki kod:

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

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

	</React.StrictMode>
);

A teraz możemy dodać router. Użyjemy BrowserRouter, ponieważ jest najczęściej używany w aplikacjach webowych. Nie zapomnijmy o nowoczesnej składni. Dodajmy linijkę importu:

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

Następnie, utwórzmy stałą router i stwórzmy nasz BrowserRouter po linijkach z importem. Zróbmy to tak, aby na głównej stronie wyświetlał się div z napisem 'Hello Router!'. Dla tego przepiszmy ścieżkę do strony głównej i element, który będziemy wyświetlać:

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

Musimy jeszcze dodać komponent RouterProvider i wpisać stworzony przez nas wyżej router. Przyjmuje on wszystkie obiekty routera, renderuje naszą aplikację i podłącza inne API:

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

Pełny kod będzie wyglądał tak:

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

Zapiszmy zmiany. Gratulacje! Nasza aplikacja już nie wyrzuca błędów. Teraz, jeśli ją uruchomimy, to na stronie głównej w przeglądarce zobaczymy 'Hello Router!'.

Korzystając z podanego materiału, spraw, aby na stronie głównej Twojej aplikacji, którą stworzyłeś w zadaniach domowych do poprzednich lekcji, wyświetlał się akapit z tekstem 'I'm number one in React!'.