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:

main.jsximport './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:

main.jsximport {
  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ć:

main.jsxconst 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:

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

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

main.jsximport './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!'.