Дабаўленне роўтара ў React Router

Крыху азнаёміўшыся з роўтарамі, мы можам дадаць адзін з іх у прыкладанне.

Але для початку нам трэба крыху пачысціць шаблон нашага прыкладання, які мы стварылі на мінулых занятках. А канкрэтней - займемся папачкай src. Выкіньце з яе папку assets, файлы App.css, App.jsx. Увогуле, у вас застануцца ў ёй толькі main.jsx і index.css.

Адкрыйце index.css і поўнасцю яго ачысціце. Хай ён будзе пустым.

Цяпер займемся нашым галоўным файлам main.jsx. У ім у нас будзе такi код:

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

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

  </React.StrictMode>
);

А цяпер мы можам дадаць роўтар. Мы выкарыстаем BrowserRouter, паколькі ён часцей за ўсё выкарыстоўваецца ў вэб-прыкладаннях. Не забудзем і пра сучасны сінтаксіс. Дадамо радок імпарту:

main.jsximport {
  createBrowserRouter,
  RouterProvider,
} from 'react-router-dom';

Затым, завядзём канстанту router і створым наш BrowserRouter пасля радкоў з імпартам. Зробім гэта так, каб на галоўнай старонцы ў нас адлюстроўваўся дзів з надпісам 'Hello Router!'. Для гэтага пропiшам шлях да галоўнай старонкі і элемент, які будзем адлюстроўваць:

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

Нам яшчэ трэба дадаць кампанент RouterProvider і ўпісаць створаны намі вышэй роўтар. Ён прымае ўсе аб'екты роўтара, рэндэрыць наша прыкладанне і падключае іншыя API:

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

Поўны код будзе выглядаць так:

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

Захаваем змены. Віншую! Наша з вамі прыкладанне больш не лаецца. Цяпер, калі мы яго запусцім, то на галоўнай старонцы ў браўзэры мы ўбачым 'Hello Router!'.