3. Роутинг

Все компоненты находятся на одной странице, а нам нужно чтобы для каждой компоненты был свой уникальный адрес и еще нам нужно научиться ходить по страницам. Чтобы решить эти вопросы познакомимся с библиотекой react router

Роутинг

Первое, что необходимо сделать - это обернуть приложение main.jsx в BrowserRouter

import { createRoot } from "react-dom/client"
import { BrowserRouter } from "react-router"
import "./index.css"
import App from "./App.jsx"
 
createRoot(document.getElementById("root")).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
)

Настроим роутинг:

• обернем все страницы в Routes
• обернем отдельную страницу в Route

...