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:

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

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

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

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

Hele koden vil se slik ut:

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 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.