Для будь-якої нетривіальної програми React ви повинні розбити її на кілька сторінок. Для цього необхідно реалізувати реакційну маршрутизацію.
Спочатку це може лякати. Однак цей підручник допоможе вам швидко ознайомитися з усіма необхідними основами. У цьому підручнику ми створимо програму, яка використовує маршрутизацію.
Що таке React Routing (клієнтська маршрутизація)
Маршрутизація React — це форма маршрутизації на стороні клієнта, реалізована в програмах React. Маршрутизація на стороні клієнта є альтернативою маршрутизації на стороні сервера. У маршрутизації на стороні сервера браузер робить запит GET до веб-сервера кожного разу, коли ви переходите на іншу сторінку. Відповідь на цей запит може тривати кілька секунд.
Для веб-програми, де ви постійно переходите між сторінками, час очікування створює погану взаємодію з користувачем. Маршрутизація на стороні клієнта є альтернативою цьому. Замість того, щоб надавати браузеру HTML, програма використовує JavaScript для створення HTML для різних сторінок.
Вам потрібно лише надати файл index.html як точку входу, щоб ваша програма працювала. Потім ця точка входу завантажує ваш код JavaScript. Пакет JavaScript відтворюватиме сторінки, маніпулюючи DOM, обробляючи маршрутизацію та реалізовуючи функції програми.
Оскільки сервер відображає лише сторінку index.html, додаток називається односторінковим.
Переваги маршрутизації на стороні клієнта
- Це покращує взаємодію з користувачем, оскільки навігація є швидшою, а програма буде більш чуйною. При маршрутизації на стороні сервера кожна навігація є мережевим запитом із затримкою в кілька секунд.
- Це дозволяє створювати автономні програми, оскільки весь код, необхідний для запуску програми, можна кешувати локально. Це дозволяє створювати більше доступних додатків і запропонувати офлайн-функціональність.
- Програма також використовуватиме менше даних, оскільки мережеві запити значно зменшуються, якщо все надсилається один раз, а деякі файли кешуються локально.
- Це також зменшує навантаження на сервер, оскільки сервер має відтворити програму лише один раз. Це контрастує з відтворенням на стороні сервера, де сервер постійно відтворює програму.
Далі обговоримо, як реалізувати реагуючу маршрутизацію.
Як реалізувати маршрутизацію React
Для цього підручника ми створимо просту програму для створення нотаток. Він складатиметься з кількох сторінок. Ми запровадимо маршрутизацію на стороні клієнта за допомогою DOM React Router, щоб клієнт міг переміщатися між різними сторінками. Ми не будемо створювати все, щоб програма працювала. Замість цього ми зосередимося на маршрутизації.
передумови
Щоб слідувати цьому посібнику, ви повинні розуміти HTML, JavaScript і React. Вам також потрібно буде встановити Node.js і NPM. Ви можете завантажити та інсталювати їх одночасно, встановивши Nodejs з веб-сайт. Або дотримуйтеся вказівок у вбудованому відео YouTube.
Що ми будуємо
Додаток матиме кілька сторінок. Використовуючи реакцію маршрутизації, ви зможете переходити до різних сторінок. Дизайни для сторінок показані нижче.
Домашня сторінка відображається за маршрутом ‘/’.
Сторінка About відображається за маршрутом ‘/about’.
Сторінка приміток за маршрутом ‘/notes’.
Нова сторінка примітки за маршрутом ‘/notes/new’.
Ви можете переглянути кожну нотатку повністю на сторінці нотаток. Ця сторінка відображається за маршрутом ‘/routes/
Починаємо
Щоб почати, створіть новий проект React. Я збираюся використовувати Vite, тому команда для ініціалізації нового проекту така:
npm create vite@latest scribbble --template react
Я вказав «scribble» як назву проекту та React як шаблон. Далі я збираюся відкрити VS Code за допомогою наведених нижче команд:
cd scribbble code .
Після відкриття VS Code я повернуся до вікна терміналу та встановлю react-router-dom. Цей пакет полегшує реалізацію маршрутизації реагування у ваших програмах.
npm install react-router-dom
Ми збираємося створити файл, де будуть зберігатися наші нотатки. Створіть файл src/notes.js і додайте такий код:
const notes = [
{
id: 1,
title: "Note 1",
body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
},
{
id: 2,
title: "Note 2",
body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
},
{
id: 3,
title: "Note 3",
body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
},
];
export default notes;
Потім видаліть файл src/App.css. Ми не будемо використовувати його в цьому проекті. Також переконайтеся, що видалено імпорт файлу App.css із файлу App.jsx.
Після цього замініть усе у файлі index.css цим:
:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;color:#404040}*{margin:0;padding:0}.nav-container{display:flex;justify-content:space-between;padding:15px 30px}.home-buttons,.nav{display:flex;gap:10px}a{text-decoration:none;color:inherit;font-weight:600}h1{font-size:63px;margin:20px 0}input,textarea{border:1px solid #f1f1f1;background-color:#fafafa;outline:0;padding:10px;width:100%}textarea{resize:none;font-family:inherit}.container{padding:15px}.primary{background-color:#8a2be2;color:#fff}.secondary{background-color:#eee}.button{padding:15px 30px;font-size:16px;border:none;font-weight:700;border-radius:7px;cursor:pointer}.home-container{height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center}.new-note-container{padding:20px}.new-note-form{display:flex;flex-direction:column;align-items:center;width:500px;gap:20px;margin:auto;border-radius:7px;padding:20px 30px}.notes-list{display:grid;grid-template-columns:1fr 1fr 1fr;gap:30px;padding:0 60px}.note{border:1px solid #d3d3d3;padding:15px;border-radius:7px}.note h2{font-size:1rem;margin-bottom:10px}.note p{color:#585858;font-size:.9rem;cursor:pointer}.note-container{display:flex;align-items:center;justify-content:center;padding:50px}.note-content{width:500px}
Далі створіть наступні файли для сторінок, які ми будемо створювати:
- src/pages/Home.jsx
- src/pages/About.jsx
- src/pages/Note.jsx
- src/pages/NewNote.jsx
- src/pages/Notes.jsx
Потім створіть файл для компонента панелі навігації. Цей файл буде розташовано за адресою src/components/NavBar.jsx
Налаштування маршрутизації React
Після налаштування нашої програми ми налаштуємо маршрутизацію в нашій програмі.
Відкрийте файл App.jsx і видаліть усе, що всередині. Далі додайте такі імпортовані файли вгору файлу:
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { NavBar } from "./components/NavBar";
import { Home } from "./pages/Home";
import { About } from "./pages/About";
import { Notes } from "./pages/Notes";
import { Note } from "./pages/Note";
import { NewNote } from "./pages/NewNote";
Ми імпортуємо компоненти BrowserRouter, Routes і Routes з react-router-dom. Вони будуть використані для налаштування маршрутизатора. Далі ми імпортували NavBar з нашого каталогу компонентів і кілька сторінок з наших файлів сторінок. Ми ще не реалізували сторінки, але скоро це зробимо.
Далі ми налаштуємо наш компонент програми:
export default App () {
}
Потім ми додаємо таку розмітку в наш оператор return:
return (
<BrowserRouter>
</BrowserRouter>
)
Це рендерить BrowserRouter, компонент React, наданий компонентом react-router-dom. Цей компонент налаштовує маршрутизатор, який працює в браузері. Наш додаток буде міститися в цих тегах.
Далі ми додамо панель навігації та створимо компонент Routes.
return (
<BrowserRouter>
<NavBar />
<div className="container">
<Routes>
</Routes>
</div>
</BrowserRouter>
);
Всередині елемента BrowserRouter ми додали NavBar. Ми визначимо цей елемент пізніше, але він створює посилання у верхній частині кожної сторінки. Замість того, щоб писати його окремо для кожної сторінки, ми створимо один NavBar.
Потім ми створили елемент-контейнер. Цей елемент не є необхідним для маршрутизації. Ми просто додали його для застосування стилю.
Всередині контейнера ми додали компонент Routes. Тут відображатимуться різні сторінки залежно від маршруту, на якому перебуває браузер. Усе всередині компонента Routes буде повторно відтворюватися щоразу, коли маршрут змінюється.
Нарешті, ми додаємо маршрути для різних сторінок.
return (
<BrowserRouter>
<NavBar />
<div className="container">
<Routes>
<Route path="/" Component={Home} />
<Route path="about" Component={About} />
<Route path="notes" Component={Notes}>
<Route path="new" Component={NewNote} />
<Route path=":id" Component={Note} />
</Route>
</Routes>
</div>
</BrowserRouter>
);
Компонент «Домашня сторінка» буде відображено, якщо шлях буде «/», а компонент «Про» буде відображено за маршрутом «/about». Компонент Notes буде відображено за маршрутом ‘/notes’. У нас також є маршрути ‘/notes/new’ і ‘/notes/:id’, визначені як вкладені маршрути.
Пояснення вкладених маршрутів
Маршрут може містити внутрішні маршрути. Вони називаються вкладеними маршрутами. Шлях до цих вкладених маршрутів буде приєднаний до батьківського маршруту, щоб сформувати повний шлях. Наприклад, маршрути «notes» і «new» будуть об’єднані в «/notes/new».
Що стосується того, як компоненти відображаються, коли користувач переходить до батьківського маршруту, буде відображено лише батьківський компонент. Однак батьківський і вкладений компоненти відображатимуться разом під час навігації вкладеним маршрутом.
Щоб відобразити обидва компоненти разом, компонент Notes повинен відобразити компонент Outlet, який визначає, де буде вбудовано компонент Note. Ви побачите це пізніше, коли ми почнемо створювати сторінки.
Динамічні маршрути
Поки що ми вказували буквальний маршрут, якому хочемо відповідати. Наприклад, маршрути ‘/’ і ‘about’. Однак react-router-dom дозволяє нам вказувати динамічні маршрути. Динамічний маршрут містить частину, яку можна зіставити з параметром запиту. При збігу параметр запиту передається на сторінку.
Наприклад, у батьківському маршруті ‘posts’ є вкладений маршрут, який містить динамічну частину, визначену :id. Цей маршрут приймає будь-який текст замість :id, і цей текст стає доступним для компонента Note як id.
Створення панелі навігації
Ми використовуємо компоненти Link замість звичайних тегів прив’язки для навігації за допомогою react-router-dom. Отже, наша навігаційна панель має виглядати так:
import { Link } from "react-router-dom";
export function NavBar() {
return (
<div className="nav-container">
<Link to="/">Scribbble</Link>
<nav className="nav">
<Link to="/about">About</Link>
<Link to="/notes">Notes</Link>
<Link to="/notes/new">New Note</Link>
</nav>
</div>
);
}
Додайте код до src/pages/NavBar.jsx.
Створення сторінок
Далі ми створимо сторінки. Для домашньої сторінки додайте наступний код до src/pages/Home.jsx.
import { useNavigate } from "react-router-dom";
export function Home() {
const navigate = useNavigate();
return (
<div className="home-container">
<h1>Notes for professionals</h1>
<div className="home-buttons">
<button
onClick={() => {
navigate("/notes/new");
}}
className="button primary"
>
Start Scribbling
</button>
<button
onClick={() => {
navigate("/notes");
}}
className="button secondary"
>
View Notes
</button>
</div>
</div>
);
}
На домашній сторінці ми хотіли б використовувати кнопки для навігації. У результаті ми використовуємо хук useNavigate для програмної навігації. Ми імпортували хук, а потім викликали його всередині Home Component. Повернене значення після виклику хука є функцією, яку можна використовувати для навігації.
Далі ми визначимо сторінку About. Додайте наступний код до файлу src/pages/About.jsx.
export function About() {
return (
<div>
<h1>About</h1>
<p>Simple Notes is the best note-taking application for professionals</p>
</div>
);
}
Після цього ми визначимо сторінку Примітки.
У цей компонент ми також маємо включити компонент Outlet, який буде використовуватися для відтворення будь-яких вкладених маршрутів. З цієї причини наша сторінка src/pages/Notes.jsx виглядатиме так.
import { Outlet, useNavigate } from "react-router-dom";
import notes from "../notes";
export function Notes() {
const navigate = useNavigate();
return (
<div>
<Outlet />
<div className="notes-list">
{notes.map((note) => {
return (
<div
className="note"
key={note.id}
onClick={() => {
navigate("/notes/" + note.id);
}}
>
<h2>{note.title}</h2>
<p>{note.body.slice(0, 100)}</p>
</div>
);
})}
</div>
</div>
);
}
Далі ми визначаємо сторінку Note.
Це буде відображено для окремої нотатки. Щоб вибрати нотатку для рендерингу, Notes отримає доступ до ідентифікатора, указаного в динамічній частині маршруту. Для цього ми використовуємо хук userParams. Таким чином, це має бути код у вашому файлі src/pages/Note.jsx:
import { useParams } from "react-router-dom";
import notes from "../notes";
export function Note() {
const params = useParams();
const note = notes.find((note) => note.id == params.id);
return (
<div className="note-container">
<div className="note-content">
<h2>{note.title}</h2>
<p>{note.body}</p>
</div>
</div>
);
}
Нарешті, ми створимо компонент NewNote в src/pages/NewNote.jsx за допомогою наступного коду:
export function NewNote() {
return (
<div class="new-note-container">
<form class="new-note-form">
<h2>New Note</h2>
<input type="text" name="title" placeholder="Note title" />
<textarea rows="10" placeholder="Note text" />
<button class="button primary">Save Note</button>
</form>
</div>
);
}
На даний момент ми написали весь код програми. Ви можете запустити програму за допомогою npm run dev. Перейдіть на різні сторінки та подивіться, наскільки швидка маршрутизація на стороні клієнта.
Недоліки маршрутизації на стороні клієнта
Незважаючи на численні переваги, маршрутизація на стороні клієнта має кілька недоліків. Вони пояснюються нижче:
- Початкове завантаження сторінки може бути повільним, оскільки потрібно завантажити всю програму. Пакет JavaScript може бути дуже великим і потребувати тривалого завантаження.
- Оскільки JavaScript генерує розмітку, сторінка не буде оптимізована для SEO.
- Оскільки все залежить від JavaScript, браузери, які не підтримують JavaScript або в яких вимкнено JavaScript, не зможуть запустити програму.
Висновок
У цій статті ми розглянули реакційну маршрутизацію, створивши невеликий проект. Хоча ми не охопили все, цей посібник охоплює концепції, які ви використовуватимете в більшості проектів, над якими працюватимете. Для отримання додаткової інформації про react-router-dom ось офіційні документи.
Далі прочитайте цю статтю про бібліотеки форм React.