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

11

9/23/2022

Мы создадим небольшое, но многофункциональное приложение, которое позволит вам отслеживать ваши контакты. Туториал, в целом, займет от 30 до 60 м.

Вадим Пашаев

Вадим Пашаев

CEO PXSTUDIO_

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

Для справки

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

Установка

Если у вас уже есть, созданное 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>
)

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

Подписаться на рассылку

Получите лучшие новости по веб-разработке и AI

Подписаться на рассылку

Получите лучшие новости по веб-разработке и AI

Оценка проекта

Хотите быструю оценку Вашего проекта?

Василий Иванов
Максим Насенников
Виктория Мальцева
Vadim Pashaev

Заполните форму справа и наша команда экспертов поможет найти для Вас оптимальное решение вашей идеи или задачи

Есть интересная идея?

И вы очень хотите ее реализовать, пишите нам и получите подробное коммерческое предложение и быструю реализацию