Добавление роутера в React Router
Немного ознакомившись с роутерами, мы можем добавить один из них в приложение.
Но для начала нам нужно немного
почистить шаблон нашего приложения,
который мы создали на прошлых занятиях.
А конкретнее - займемся папочкой src.
Выбросьте из нее папку assets, файлы
App.css, App.jsx. В общем, у
вас останутся в ней только main.jsx
и index.css.
Окройте index.css и полностью его
очистите. Пусть он будет пустым.
Теперь займемся нашим главным файлом
main.jsx. В нем у нас будет
такой код:
import './index.css'
import React from 'react';
import ReactDOM from 'react-dom/client';
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
</React.StrictMode>
);
А теперь мы можем добавить роутер.
Мы используем BrowserRouter,
поскольку он чаще всего используется в
веб-приложениях. Не забудем и про
современный синтаксис. Добавим строчку
импорта:
import {
createBrowserRouter,
RouterProvider,
} from 'react-router-dom';
Затем, заведем константу router и
создадим наш BrowserRouter после
строчек с импортом. Сделаем это так, чтобы
на главной странице у нас отображался
див с надписью 'Hello Router!'.
Для этого пропишем путь к главной странице
и элемент, который будем отображать:
const router = createBrowserRouter([
{
path: '/',
element: <div>Hello Router!</div>,
},
]);
Нам еще нужно добавить компонент
RouterProvider и вписать созданный
нами выше роутер. Он принимает
все объекты роутера, рендерит наше
приложение и подключает другие API:
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<RouterProvider router={router} />
</React.StrictMode>
);
Полный код будет выглядеть так:
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>
);
Сохраним изменения. Поздравляю! Наше
с вами приложение больше не ругается ;).
Теперь, если мы его запустим, то на
главной странице в браузере мы
увидим 'Hello Router!'.
Используя приведенный материал,
сделайте так, чтобы на главной странице
вашего приложения, которое вы создали
в домашних заданиях к прошлым урокам,
у вас отображался параграф с текстом
'I'm number one in React!'.