React Router 6 - Туториал

👉 Каждый раз, когда вы видите это, значит, вам нужно что-то сделать в приложении!

Остальное просто для информации и более глубокого понимания. Давайте приступим к делу.

Установка

Если у вас уже есть, созданное React-приложение, то можете пропустить этот пункт.

npx create-react-app my-app
// или
yarn create react-app my-app

Добавление роутера

Первое, что мы сделаем, это создадим BrowserRouter и сконфигурируем наш первый маршрут. С помощью него мы включаем браузерный роутинг в нашем приложении.

// src/index.js
import React from "react"
import ReactDOM from "react-dom/client"
import {
  createBrowserRouter,
  RouterProvider,
  Route
} from "react-router-dom"
import "./index.css"

const router = createBrowserRouter([
  {
    path: "/",
    element: <div>Hello world!</div>
  }
])

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
)

Этот первый маршрут мы часто называем «корневым маршрутом», так как остальные наши маршруты будут отображаться внутри него. Он будет служить корневым макетом пользовательского интерфейса, по мере продвижения у нас будут вложенные макеты.