Почему существует боковая панель/навигационная панель?

Навигация — самый простой способ навигации по сайту. Навигационные ссылки могут отображаться либо на боковой панели, либо на панели навигации. Обе услуги широко используются большинством веб-сайтов.


Что будем строить?

В этой статье мы построим простой, но отзывчивая боковая панельшаг за шагом, используя РеактJS, стилизованные компонентыа также Реагировать маршрутизатор DOM как наши основные зависимости. Эта боковая панель будет полностью реагировать на все устройства, демоверсия которых доступна присутствует здесь.

Плюс: мы также изучим одну из структур папок в этом приложении для реагирования.


Предпосылки

Прежде чем погрузиться в программирование этого компонента, вам необходимо убедиться, что вы хорошо знаете:

  • HTML, CSS, JavaScript
  • РеактJS
  • Стилизованные компоненты
  • Реагировать маршрутизатор DOM

Кроме того, вам также необходимо иметь:

  • NodeJS (стабильная версия)
  • NPM и/или пряжа


Сборка компонента

В Командная строкаперейдите в каталог, в котором вы хотите создать проект, и введите:


1. Установите приложение React

# With npm
npx create-react-app react-sidebar

# With yarn
yarn create react-app react-sidebar
Войти в полноэкранный режим

Выйти из полноэкранного режима

куда боковая панель реакции имя каталога проекта. Теперь откройте этот каталог проекта в вашем любимом редакторе кода. я буду использовать Код Visual Studio.

Теперь, держи index.js, App.js а также App.css и удалите другие файлы/папки внутри src папка. Это очистит большую часть реагирующего приложения.

Внутри public папка, держи index.html файл и удалите все остальные файлы/папки.


2. Добавьте пакеты в приложение реакции

Установите значки пользовательского интерфейса материалов, React Router DOM, styled-components. Выполните следующую команду, чтобы установить их в нашем приложении для реагирования:

# With npm
npm install @mui/icons-material @mui/material @emotion/styled @emotion/react react-router-dom styled-components

# With yarn
yarn add @mui/material @emotion/react @emotion/styled react-router-dom styled-components
Войти в полноэкранный режим

Выйти из полноэкранного режима

Давайте свяжем все приложение с react-router-dom так что его функции/компоненты можно использовать везде. Замените код в src/index.js со следующим:

// src/index.js
import React from "react";
import { BrowserRouter } from "react-router-dom";
import ReactDOM from "react-dom/client";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);
Войти в полноэкранный режим

Выйти из полноэкранного режима

Прежде всего, нам нужно использовать react-router-dom для создания ссылок на разные страницы в нашем приложении. Итак, нам нужно связать все приложение с его родительским компонентом, который BrowserRouter. Это даст нам доступ к использованию почти всех компонентов, которые может предложить указанный пакет.

Для этого сначала мы импортируем родительский компонент и обертываем App компонент внутри родительского компонента. Этот App компонент охватывает все наше приложение, и мы можем использовать React Router в любом месте нашего приложения.

Запустите приложение в браузере, используя npm start или же yarn start и отправляйся в локальный: 3000 для просмотра изменений.

Теперь давайте создадим маршруты/страницы, используя react-router-dom. Замените код в src/App.js со следующим кодом:

// src/App.js
import { Routes, Route } from "react-router-dom";
import { DynamicItem, Sidebar, dummyData } from "./components";
import "./App.css";

function App() {
  return (
    <div id="main">
      <Sidebar>
        <Routes>
          <Route path="/" element={<DynamicItem page="homepage" />} />
          {dummyData &&
            dummyData.map((item, index) => (
              <Route
                key={index}
                path={item.path}
                element={<DynamicItem page={item.name} />}
              />
            ))}
        </Routes>
      </Sidebar>
    </div>
  );
}

export default App;
Войти в полноэкранный режим

Выйти из полноэкранного режима

Здесь мы импортируем Routes, Route из react-router-dom который поможет нам создавать страницы в нашем приложении. Мы также импортируем Sidebar компонент, который мы будем создавать через некоторое время, dummyDataнекоторые случайные данные, которые включают путь к нашим страницам, DynamicItemфиктивная страница, которая отображает имя страницы, когда мы переходим к ней.

Следующее, что нам нужно сделать, это использовать Sidebar составная часть. Этот компонент будет принимать дочерние элементы в качестве реквизита, чтобы он был виден везде, когда мы перемещаемся между страницами. Сразу после этого нам нужно добавить Routes компонент, контейнер, который охватывает наши страницы/маршруты по мере их создания, чтобы приложение знало, что это контейнер маршрутов и он содержит страницы.

Теперь единственное, что нам нужно сделать, это добавить нужные нам маршруты. Мы знаем это dummyData содержит пути к страницам, мы можем сопоставить данные, чтобы получить их, и использовать Route компонент для каждого пути. Route компонент принимает два свойства, pathкуда будет вести маршрут, и elementкоторый является компонентом, который будет отображаться на этой странице/маршруте.

Теперь нам нужно добавить базовый стиль в наше приложение. Эти стили определяют только макет нашего приложения. Замените код в src/App.css со следующим кодом:

Примечание. Мы также можем создать некоторые стили, используя styled-components. Вы можете делать стили по своему усмотрению, но здесь я использовал css для базовых стилей.

/* src/App.css */
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: none;
  border: none;
  text-decoration: none;

  font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
}

#main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
}

.btn {
  margin: 1rem 1rem 0 0;
  padding: 0.25rem 0.5rem;
  display: flex;
  gap: 0.25rem;
  align-items: center;
  justify-content: center;
  background: transparent;
  outline: none;
  border: 1px solid #808080;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
}

.btn:hover {
  background-color: #e4e3e34d;
}

#page {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-transform: capitalize;
  font-size: 1rem;
  overflow: hidden;
}

@media screen and (min-width: 468px) {
  #page {
    font-size: 3rem;
  }

  .btn {
    padding: 0.5rem 0.75rem;
    gap: 0.5rem;
  }
}

.app__brand__text {
  font-size: 2rem;
  font-weight: 700;
  color: #5a8dee;
  margin-left: 0.5rem;
}

/* Sidebar toggle button starts */
.outer__circle {
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background-color: #5f97ef;
  display: flex;
  align-items: center;
  justify-content: center;
}

.outer__circle::after {
  position: absolute;
  top: 0.225rem;
  left: 0.215rem;
  content: "";
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background-color: #fff;
}

.inner__circle {
  position: relative;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background-color: #5f97ef;
  z-index: 100;
}

.inner__circle::after {
  position: absolute;
  top: 0.125rem;
  left: 0.15rem;
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: #fff;
}
/* Sidebar toggle button ends */
Войти в полноэкранный режим

Выйти из полноэкранного режима

Здесь мы сбрасываем каждый стиль в приложении реакции, используя * псевдоселектор, чтобы настроить все приложение так, как мы этого хотим. Кроме того, мы также определяем стили для родительского div контейнер приложения с именем класса main. Мы также определяем стили для кнопки, которая будет использоваться позже в DynamicItem составная часть.

В этом глобальном файле стилей мы вручную делаем два круга кнопку вместо использования какой-либо библиотеки. Эта кнопка переключает, отображать ли боковую панель целиком. Это можно сделать разными способами, это лишь один из них.

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

Направляйтесь к src папку и создайте в ней новую папку под components имя. Внутри components папку, создайте новый файл с Icons.js name и добавьте к нему следующий код:

// src/components/Icons.js
import HomeOutlinedIcon from "@mui/icons-material/HomeOutlined";
import WebOutlinedIcon from "@mui/icons-material/WebOutlined";
import CalendarTodayOutlinedIcon from "@mui/icons-material/CalendarTodayOutlined";
import CalendarMonthOutlinedIcon from "@mui/icons-material/CalendarMonthOutlined";
import PersonOutlineOutlinedIcon from "@mui/icons-material/PersonOutlineOutlined";
import SubjectOutlinedIcon from "@mui/icons-material/SubjectOutlined";
import GppGoodOutlinedIcon from "@mui/icons-material/GppGoodOutlined";
import AdminPanelSettingsOutlinedIcon from "@mui/icons-material/AdminPanelSettingsOutlined";
import ListAltOutlinedIcon from "@mui/icons-material/ListAltOutlined";
import InputOutlinedIcon from "@mui/icons-material/InputOutlined";

import ArrowRightOutlinedIcon from "@mui/icons-material/ArrowRightOutlined";
import ArrowBackIcon from "@mui/icons-material/ArrowBack";

export {
  HomeOutlinedIcon as HomeIcon,
  WebOutlinedIcon as LayoutIcon,
  CalendarMonthOutlinedIcon as CalendarIcon,
  PersonOutlineOutlinedIcon as UserIcon,
  SubjectOutlinedIcon as InvoiceIcon,
  GppGoodOutlinedIcon as RolesIcon,
  CalendarTodayOutlinedIcon as PagesIcon,
  AdminPanelSettingsOutlinedIcon as AuthIcon,
  ListAltOutlinedIcon as WizardIcon,
  InputOutlinedIcon as ModalIcon,
  ArrowBackIcon,
  ArrowRightOutlinedIcon as ArrowIcon,
};
Войти в полноэкранный режим

Выйти из полноэкранного режима

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

Точно так же мы создадим новый файл внутри src/components папка под названием Data.js. Этот файл будет содержать наши фиктивные данные, которые мы будем использовать в нашем приложении. Открытым Data.js файл и добавьте в него следующий код:

// src/components/Data.js
import {
  HomeIcon,
  LayoutIcon,
  CalendarIcon,
  InvoiceIcon,
  UserIcon,
  RolesIcon,
  PagesIcon,
  AuthIcon,
  WizardIcon,
  ModalIcon,
} from "./Icons";

export const SIDEBAR_DATA = [
  {
    id: 1,
    name: "dashboards",
    path: "dashboards",
    icon: <HomeIcon />,
  },
  {
    id: 2,
    name: "layouts",
    path: "layouts",
    icon: <LayoutIcon />,
  },
  {
    id: 3,
    name: "calendar",
    path: "calendar",
    icon: <CalendarIcon />,
  },
  {
    id: 4,
    name: "invoice",
    path: "invoice",
    icon: <InvoiceIcon />,
  },
  {
    id: 5,
    name: "users",
    path: "users",
    icon: <UserIcon />,
  },
  {
    id: 6,
    name: "roles & permissions",
    path: "roles",
    icon: <RolesIcon />,
  },
  {
    id: 7,
    name: "pages",
    path: "pages",
    icon: <PagesIcon />,
  },
  {
    id: 8,
    name: "authentication",
    path: "authentication",
    icon: <AuthIcon />,
  },
  {
    id: 9,
    name: "wizard examples",
    path: "wizard",
    icon: <WizardIcon />,
  },
  {
    id: 10,
    name: "modal examples",
    path: "modal",
    icon: <ModalIcon />,
  },
];
Войти в полноэкранный режим

Выйти из полноэкранного режима

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

В этом файле мы определяем массив объектов, каждый из которых содержит данные для наших страниц, то есть идентификатор, имя, путь, значок. Это все данные, которые будут использоваться в нашем приложении. Не стесняйтесь расширять его столько, сколько хотите.

Еще одна вещь, которую нам нужно сделать, это создать централизованный файл, который будет экспортировать все наши файлы, как Icons.js файл. Создавать index.js файл внутри src/components папку и добавьте в нее следующий код:

// src/components/index.js
export { default as Sidebar } from "./Sidebar";
export { default as SidebarItems } from "./Sidebar/SidebarItems";
export { default as DynamicItem } from "./Routes/[item]";

export { SIDEBAR_DATA as dummyData } from "./Data";
Войти в полноэкранный режим

Выйти из полноэкранного режима

В этом файле мы следуем той же процедуре, что и в Icons.js.

Обратите внимание, что файлы, экспортированные по умолчанию, необходимо импортировать как default тоже но без default нужно импортировать без него.

Теперь давайте создадим файл, который будет отображать элементы страницы. Вы правильно угадали! мы будем создавать DynamicItem составная часть. Создайте папку внутри src под именем Routes и внутри этой папки создайте файл с [item].jsx и добавьте в него следующий код:

Если вы работали с NextJS, вы знаете, почему мы используем квадратные скобки. Для тех, кто не знает, можете называть как угодно, даже без квадратных скобок.

// src/components/Routes/[item].jsx
import { Link } from "react-router-dom";
import { ArrowBackIcon } from "../Icons";

const Item = (props) => {
  const { page } = props;
  if (page === "homepage") {
    return <div id="page">{page}</div>;
  } else {
    return (
      <div id="page">
        <Link to="/">
          <button className="btn">
            <ArrowBackIcon /> Back to Home
          </button>
        </Link>
        {page}
      </div>
    );
  }
};

export default Item;
Войти в полноэкранный режим

Выйти из полноэкранного режима

Мы знаем, что создали маршруты для нужных нам страниц. Теперь нам нужно сделать страницы, которые будут отображаться.

Здесь мы импортируем Link компонент из react-router-domзадний значок из Icons.js файл. Мы знаем, что за ней нет другой страницы/маршрута, но домашняя страница содержит другие страницы/маршруты. Так, если маршрут /нам просто нужно отобразить компонент, иначе нам также нужно отобразить кнопку «Назад», которая вернет нас на домашнюю страницу.

мы используем Link компонент, чтобы вернуться к homepage так как страница уже существует. Напомним, что мы создали маршруты внутри src/App.js.

Теперь идет основной элемент, компонент боковой панели. Направляйтесь к src папку и создать в ней новую папку под именем Sidebar и создайте в нем новый файл с index.jsx имя. Это будет основной файл, который будет потреблять почти все файлы. Добавьте в него следующий код:

// src/components/Sidebar/index.jsx
import React, { useState } from "react";

import {
  Children,
  SidebarContainer,
  SidebarWrapper,
  SidebarLogoWrapper,
  SidebarLogo,
  SidebarBrand,
  SidebarToggler,
} from "./SidebarStyles";
import BrandLogo from "./BrandLogo.svg";

import { SidebarItems } from "..";

const MOBILE_VIEW = window.innerWidth < 468;

export default function Sidebar({ children }) {
  const [displaySidebar, setDisplaySidebar] = useState(!MOBILE_VIEW);

  const handleSidebarDisplay = (e) => {
    e.preventDefault();
    if (window.innerWidth > 468) {
      setDisplaySidebar(!displaySidebar);
    } else {
      setDisplaySidebar(false);
    }
  };

  return (
    <React.Fragment>
      <SidebarContainer displaySidebar={displaySidebar}>
        <SidebarWrapper>
          <SidebarLogoWrapper displaySidebar={displaySidebar}>
            {/* Logo wrapper starts */}
            <SidebarLogo href="#">
              <span className="app-brand-logo demo">
                <img src={BrandLogo} alt="Brand logo" />
              </span>
              <SidebarBrand
                displaySidebar={displaySidebar}
                className="app__brand__text"
              >
                Frest
              </SidebarBrand>
            </SidebarLogo>
            {/* Logo wrapper ends */}
            {/* Toggle button */}
            <SidebarToggler
              displaySidebar={displaySidebar}
              onClick={handleSidebarDisplay}
            >
              <div className="outer__circle">
                <div className="inner__circle" />
              </div>
            </SidebarToggler>
          </SidebarLogoWrapper>
            {/* Render the SidebarItems component */}
          <SidebarItems displaySidebar={displaySidebar} />
        </SidebarWrapper>
      </SidebarContainer>
            {/* Render the children */}
      <Children displaySidebar={displaySidebar}>{children}</Children>
    </React.Fragment>
  );
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

Это файл, в котором мы будем строить Sidebar. Мы импортируем менеджер состояния useState из React для управления видом боковой панели, стили из другого файла, он будет создан в том же каталоге, Логотип бренда Не стесняйтесь использовать любой логотип, который вы хотите, SidebarItems файл, который будет отображать наши элементы из данных.

Еще одна вещь, которую мы делаем здесь, это создание Глобальный переменная, в которой будет храниться информация о том, является ли точка обзора мобильной или нет. Если точка обзора мобильная, отобразите часть боковой панели, в противном случае сделайте боковую панель переключаемой, используя useState. Затем мы создаем функцию стрелки, которая будет обрабатывать, отображать ли полную боковую панель.

В итоге мы возвращаем Реагировать на фрагмент и отображение логотипа бренда, кнопки переключения, элементов боковой панели и дочерних элементов.

Обратите внимание, что мы создаем стили, используя styled-components который может принимать параметры и поможет нам в отображении боковой панели.

Теперь давайте создадим файл, который применит все необходимые стили к боковой панели. Направляйтесь к src/components/Sidebar и создайте новый файл под именем SidebarStyles.js и добавьте в него следующий код:

// src/components/Sidebar/SidebarStyles.js
import styled from "styled-components";

// Children Component
export const Children = styled.div`
  width: 100%;
  height: 100%;
  margin-left: ${({ displaySidebar }) => (displaySidebar ? "15rem" : "5rem")};
  @media (max-width: 468px) {
    margin-left: 5rem;
  }
`;

export const SidebarWrapper = styled.div`
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  font-size: 0.9rem;
`;

export const SidebarLogoWrapper = styled.div`
  padding: 0.5rem 1rem;
  margin-bottom: 1rem;
  display: flex;
  justify-content: ${({ displaySidebar }) =>
    displaySidebar ? "space-between" : "center"};
  align-items: center;
  @media (max-width: 468px) {
    justify-content: center;
  }
`;

export const SidebarLogo = styled.a`
  display: flex;
  align-items: center;
  justify-content: center;
  @media (max-width: 468px) {
    display: none;
  }
`;

export const SidebarBrand = styled.span`
  display: ${({ displaySidebar }) => (displaySidebar ? "block" : "none")};
`;

export const SidebarToggler = styled.button`
  cursor: pointer;
  display: ${({ displaySidebar }) => (displaySidebar ? "block" : "none")};
  @media (max-width: 468px) {
    display: block;
  }
`;

// SidebarItem styles
export const ItemsList = styled.ul`
  list-style: none;
`;

export const ItemContainer = styled.li`
  margin-top: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.25rem;
  border-radius: 0.2rem;
  cursor: pointer;
  &:hover {
    background: #eaeced;
  }
  &.active {
    background-color: #dbe4f3;
  }
`;

export const ItemWrapper = styled.div`
  display: flex;
  align-items: center;
  color: #7c7788;
`;

export const ItemName = styled.span`
  margin-left: ${({ displaySidebar }) => (displaySidebar ? "0.5rem" : "0")};
  display: ${({ displaySidebar }) => (displaySidebar ? "block" : "none")};
  text-transform: capitalize;
`;

// Sidebar Container
export const SidebarContainer = styled.div`
  position: absolute;
  left: 0;
  width: ${({ displaySidebar }) => (displaySidebar ? "15rem" : "5rem")};
  height: 100vh;
  padding: 0.75rem;
  background: #f3f4f4;
  transition: width 350ms ease;
  border-right: 1px solid #d4d8dd;
  overflow-x: hidden;
  ${({ displaySidebar }) =>
    displaySidebar && "box-shadow: 8px 0px 12px 0px rgba(0,0,0,0.1)"};
  ${ItemWrapper} {
    justify-content: ${({ displaySidebar }) => !displaySidebar && "center"};
  }
  &:hover {
    ${({ displaySidebar }) =>
      !displaySidebar && "box-shadow: 8px 0px 12px 0px rgba(0,0,0,0.1)"};
    @media (min-width: 468px) {
      width: ${({ displaySidebar }) => !displaySidebar && "15rem"};
      ${SidebarLogoWrapper} {
        justify-content: ${({ displaySidebar }) =>
          !displaySidebar && "space-between"};
      }
      ${SidebarBrand} {
        display: ${({ displaySidebar }) => !displaySidebar && "block"};
      }
      ${SidebarToggler} {
        display: ${({ displaySidebar }) => !displaySidebar && "block"};
      }
      ${ItemWrapper} {
        justify-content: ${({ displaySidebar }) =>
          !displaySidebar && "flex-start"};
      }
      ${ItemName} {
        display: ${({ displaySidebar }) => !displaySidebar && "block"};
        margin-left: ${({ displaySidebar }) => !displaySidebar && "0.5rem"};
      }
    }
  }
  ::-webkit-scrollbar {
    width: 4px;
    height: 3px;
  }
  ::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: transparent;
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #eaeced;
    &:hover {
      background: #d5e0f3;
    }
  }
  @media (max-width: 468px) {
    width: 5rem;
  }
`;
Войти в полноэкранный режим

Выйти из полноэкранного режима

Здесь мы делаем стили в соответствии с состоянием, которое мы создали внутри Sidebar.jsx. Напомним, что мы передали параметры этим компонентам. Мы можем использовать эти параметры для отображения и скрытия всего, что захотим.

Обратите внимание на иерархию. Чтобы управлять дочерним компонентом из родительского компонента, дочерний компонент должен быть объявлен перед родительским компонентом.

Теперь давайте создадим файл, который будет отображать все элементы боковой панели. Внутри того же каталога создайте новый файл под именем SidebarItems.jsx и добавьте в него следующий код:

// src/components/Sidebar/SidebarItems.jsx
import React, { useState } from "react";
import { Link } from "react-router-dom";
import {
  ItemsList,
  ItemContainer,
  ItemWrapper,
  ItemName,
} from "./SidebarStyles";

import { dummyData } from "..";

const SidebarItems = ({ displaySidebar }) => {
  const [activeItem, setActiveItem] = useState(0);

  return (
    <ItemsList>
      {dummyData.map((itemData, index) => (
        <ItemContainer
          key={index}
          onClick={() => setActiveItem(itemData.id)}
          {/* Adding active class when the user clicks */}
          className={itemData.id === activeItem ? "active" : ""}
        >
          <Link to={itemData.path}>
            <ItemWrapper>
              {itemData.icon}
              <ItemName displaySidebar={displaySidebar}>
                {itemData.name}
              </ItemName>
            </ItemWrapper>
          </Link>
        </ItemContainer>
      ))}
    </ItemsList>
  );
};

export default SidebarItems;
Войти в полноэкранный режим

Выйти из полноэкранного режима

В этом файле мы используем useState для управления активным элементом боковой панели, Link из React Router для перенаправления пользователя на страницу, фиктивные данные из src/components/index.jsи стили из src/components/Sidebar/SidebarStyles.js.

Внутри основной функции мы создаем список, а внутри списка мы сопоставляем фиктивные данные и визуализируем их с использованием импортированных нами стилизованных компонентов. Обратите внимание, что мы также создали активный псевдоселектор внутри SidebarStyles.js, который стилизует активный элемент. Активный класс добавляется к элементу, только если пользователь щелкает его.

Здесь мы также используем Link компонент React Router для каждого элемента, чтобы перейти к элементу, который щелкает пользователь.

Наконец, мы имеем следующий вывод. Играйте с кодом, как хотите, и наблюдайте за изменениями.
изображение.png

Это простой компонент боковой панели. Однако вы можете расширить его и сделать его намного более удивительным, как бы вы этого ни требовали.


Ресурсы:

  1. Живая демонстрация
  2. Исходный код
  3. стилизованные компоненты
  4. Реагировать маршрутизатор DOM

Оставайтесь с нами, чтобы узнать больше о моих блогах на мой сайт

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