Установка React Router в Redux приложение
На прошлых уроках мы установили основные инструменты для работы с Redux. Часто бывает так, что приложению нужен маршрутизатор для навигации по его web-страницам и наше приложение не станет исключением. Для этого мы установим библиотеку React Router.
Откроем наш проект и наберем в терминале следующую команду:
npm install react-router-dom
Забегая немного вперед, скажу, что наше
Redux приложение традиционно посвящено
продуктам, информация о которых выкладывается
некими продавцами. Поэтому сейчас мы немного
переделаем главный компонент App, а
также добавим в приложение функционал для
осуществления маршрутизации.
Для начала зайдем в папку src, а затем
в app и создадим здесь файл root.jsx. Это
будет корень нашего сайта: cлева у нас будет менюшка,
а справа - контент (пока же у нас здесь
только заголовок):
function Root() {
return (
<div id="main">
<div id="menu">
<nav>
<a>Products</a>
<a>Sellers</a>
</nav>
</div>
<div id="main_page">
<h2>This is my first Redux app!</h2>
<hr></hr>
</div>
</div>
)
}
export default Root
А компонент App мы переделаем. Для начала
полностью удалим его содержимое. Затем
импортируем две функции для роутера и наш
корневой компонент Root:
import { createBrowserRouter, RouterProvider } from 'react-router-dom'
import Root from './app/root'
Ниже после импорта создадим роутер,
и пропишем первый маршрут, передав ему
наш Root в качестве отображаемого элемента
и, соответсвенно, установив путь в '/'.
В дальнейшем в App мы будем добавлять и
другие необходимые маршруты:
const router = createBrowserRouter([{ path: '/', element: <Root /> }])
Ниже напишем код функции App:
function App() {
return <RouterProvider router={router} />
}
export default App
Все. Запускаем. В следующем разделе мы будем реализовывать компоненты для работы Redux приложения.
Напоследок добавим немного красоты, прописав для
этого стили в index.css:
body {
font-size: 24px;
line-height: 1.5;
}
nav {
display: flex;
flex-direction: column;
}
ul {
list-style: none;
padding: 0;
}
h1, h2, h3 {
margin: 0;
}
a {
text-decoration: none;
color: blue;
cursor: pointer;
}
#main {
display: flex;
margin: 20px;
}
#menu {
margin-right: 50px;
padding-top: 50px;
padding-right: 50px;
border-right: 2px solid lightgray;
font-weight: bold;
}
Добавьте React Router в ваше приложение.
Пусть ваше приложение будет касаться
студентов, информацию о которых будут
выкладывать преподаватели. Учитывая это,
создайте корневой компонент Root.
Переделайте компонент App как
описано в уроке.