Меню навигации боковой панели обычно состоит из вертикального списка ссылок. Вы можете создать набор ссылок в React, используя react-router-dom.
Выполните следующие действия, чтобы создать боковое навигационное меню React со ссылками, содержащими значки материалов пользовательского интерфейса. Ссылки будут отображать разные страницы при нажатии на них.
Создание React-приложения
Если у вас уже есть Реагировать на проект, смело переходите к следующему шагу.
Вы можете использовать команду create-react-app, чтобы быстро приступить к работе с React. Он устанавливает все зависимости и конфигурацию для вас.
Выполните следующую команду, чтобы создать проект React с именем react-sidenav.
npx Создайте-реагировать-приложение
Это создаст папку react-sidenav с некоторыми файлами, которые помогут вам начать работу. Чтобы немного очистить эту папку, перейдите в папку src и замените содержимое App.js следующим:
импорт './App.css';функцияПриложение() {
возвращаться (
<div имя_класса="Приложение"></div>
);
}
экспортдефолт Приложение;
Создание компонента навигации
Навигационный компонент, который вы создадите, будет выглядеть следующим образом:
Это довольно просто, но как только вы закончите, вы сможете изменить его в соответствии со своими потребностями. Вы можете свернуть компонент навигации, используя значок двойной стрелки вверху:
Начните с создания несвернутого представления. Помимо значка стрелки, боковая панель содержит список элементов. Каждый из этих элементов имеет значок и некоторый текст. Вместо того, чтобы повторно создавать элемент для каждого, вы можете сохранить данные для каждого элемента в массиве, а затем выполнить итерацию по ним с помощью функции сопоставления.
Для демонстрации создайте новую папку с именем lib и добавьте новый файл с именем navData.js.
импорт ГлавнаяЗначок из '@mui/icons-material/Home';
импорт ПутешествоватьИсследоватьЗначок из '@mui/icons-material/TravelExplore';
импорт БарДиаграммаЗначок из '@mui/icons-material/BarChart';
импорт Значок настроек из '@mui/icons-material/Настройки';
экспортконстанта навигационные данные = [
{
идентификатор: 0,
значок: <ГлавнаяЗначок/>,
текст: "Дом",
ссылка на сайт: "/"
},
{
идентификатор: 1,
значок: <TravelExploreIcon/>,
текст: "Исследовать",
ссылка на сайт: "исследовать"
},
{
идентификатор: 2,
значок: <значок гистограммы/>,
текст: "Статистика",
ссылка на сайт: "статистика"
},
{
идентификатор: 3,
значок: <Значок настроек/>,
текст: "Настройки",
ссылка на сайт: "настройки"
}
]
Значки, используемые выше, взяты из библиотеки пользовательского интерфейса материалов, поэтому сначала установите ее с помощью этой команды:
установка нпм @муи/material @эмоция/react @эмоция/styled
установка нпм @муи/icons-material
Далее создайте папку с именем Составные части и добавьте новый компонент с именем Sidenav.js.
В этом файле импортируйте navData из ../lib и создайте скелет для Сиденав функция:
// В Sidenav.js
импорт { навигационные данные } из "../lib/navData";
экспортдефолтфункцияСиденав() {
возвращаться (
<див>
</div>
)
}
Чтобы создать ссылки, измените элемент div в этом компоненте следующим образом:
<див>
<кнопка className={styles.menuBtn}>
<КлавиатураDoubleArrowLeftIcon />
</button>
{navData.map (элемент =>{
возвращаться <ключ div={item.id} className={styles.sideitem}>
{item.icon}
<span className={styles.linkText}>{элемент.текст}</span>
</div>
})}
</div>Этот компонент создает навигационную ссылку, содержащую значок и текст ссылки для каждой итерации в функции карты.
Элемент кнопки содержит значок со стрелкой влево из библиотеки пользовательского интерфейса материалов. Импортируйте его вверху компонента, используя этот код.
импорт клавиатурадвойнойстрелкавлевозначок из '@mui/icons-material/KeyboardDoubleArrowLeft';
Вы могли также заметить, что имена классов ссылаются на объект стилей. Это связано с тем, что в этом руководстве используются модули CSS. Модули CSS позволяют создавать локальные стили в React.. Вам не нужно ничего устанавливать или настраивать, если вы использовали приложение create-react-app для запуска этого проекта.
В папке Components создайте новый файл с именем sidenav.module.css и добавьте следующее:
.сиденав {
ширина: 250 пикселей;
переход: ширина 0.3слегкость входа;
высота: 100вх;
цвет фона: rgb (10,25,41);
отступы сверху: 28px;
}.sidenavЗакрыто {
в составе: сиденав;
переход: ширина 0.3слегкость входа;
ширина: 60 пикселей
}.sideitem {
дисплей: гибкий;
выравнивание элементов: по центру;
отступ: 10px 20px;
курсор: указатель;
цвет: #B2BAC2;
текстовое оформление: нет;
}.linkтекст {
отступ слева: 16px;
}.linkTextClosed {
составляет: linkText;
видимость: скрытая;
}.sideitem:наведите {
фоновый цвет: #244f7d1c;
}
.menuBtn {
выровнять-себя: центр;
выровнять себя: flex-Начало;
оправдать себя: flex-конец;
цвет: #B2BAC2;
цвет фона: прозрачный;
граница: нет;
курсор: указатель;
отступ слева: 20px;
}
Настройка маршрутизатора React
Элементы div, возвращаемые функцией карты, должны быть ссылками. В React вы можете создавать ссылки и маршруты с помощью react-router-dom.
В терминале установите react-router-dom через npm.
npm установить реакцию-маршрутизатор-дом@последний
Эта команда устанавливает последнюю версию react-router-dom.
В Index.js оберните компонент приложения маршрутизатором.
импорт Реагировать из 'реагировать';
импорт РеактДОМ из 'реагировать дом/клиент';
импорт Приложение из './Приложение';
импорт {Браузермаршрутизатор} из «реагировать-маршрутизатор-дом»;
константа корень = ReactDOM.createRoot(документ.getElementById('корень'));
корень.оказывать(
<Реагировать. Строгий режим>
<БраузерРоутер>
<Приложение />
</BrowserRouter>
</React.StrictMode>
);
Затем в App.js добавьте свои маршруты.
импорт {
БраузерРоутер,
Маршруты,
Маршрут,
} из "реакция-маршрутизатор-дом";импорт './App.css';
импорт Сиденав из './Компоненты/Сиденав';
импорт Исследовать из "./Страницы/Исследовать";
импорт Дом из "./Страницы/Главная";
импорт Настройки из "./Страницы/Настройки";
импорт Статистика из "./Страницы/Статистика";
функцияПриложение() {
возвращаться (
<div имя_класса="Приложение">
<Сиденав/>
<главный>
<Маршруты>
<Путь маршрута="/" элемент={<Дом />}/>
<Путь маршрута="/explore" элемент={<Исследовать />} />
<Путь маршрута="/statistics" элемент={<Статистика />}/>
<Путь маршрута="/settings" элемент={<Настройки />} />
</Routes>
</main>
</div>
);
}
экспортдефолт Приложение;
Измените App.css с помощью этих стилей.
тело {
маржа: 0;
заполнение: 0;
}.Приложение {
дисплей: гибкий;
}
главный {
отступ: 10 пикселей;
}
Каждый маршрут возвращает другую страницу в зависимости от URL-адреса, переданного в путь реквизит. Создайте новую папку под названием «Страницы» и добавьте четыре компонента — страницу «Главная», «Обзор», «Статистика» и «Настройки». Вот пример:
экспортдефолтфункцияДом() {
возвращаться (
<див>Дом</div>
)
}
Если вы перейдете по пути /home, вы должны увидеть «Домой».
Ссылки на боковой панели должны вести на соответствующую страницу при нажатии на них. В Sidenav.js измените функцию карты, чтобы использовать компонент NavLink из react-router-dom вместо элемента div.
{navData.map (элемент => {
возвращаться <Ключ NavLink={item.id} className={styles.sideitem} to={item.link}>
{item.icon}
<span className={styles.linkText}>{элемент.текст}</span>
</NavLink>
})}
Не забудьте импортировать NavLink вверху файла.
импорт { Навлинк } из "реагировать-роутер-дом";
NavLink получает URL-адрес для ссылки через свойство to.
До этого момента панель навигации открыта. Чтобы сделать его складным, вы можете изменить его ширину, изменив класс CSS, когда пользователь нажимает кнопку со стрелкой. Затем вы можете снова изменить класс CSS, чтобы открыть его.
Чтобы реализовать эту функцию переключения, вам нужно знать, когда боковая панель открыта и закрыта.
Для этого используйте хук useState. Этот Реагировать крючок позволяет добавлять и отслеживать состояние функционального компонента.
В sideNav.js создайте хук для открытого состояния.
константа [открыть, setopen] = useState(истинный)
Инициализируйте открытое состояние в true, чтобы боковая панель всегда была открыта при запуске приложения.
Затем создайте функцию, которая будет переключать это состояние.
константа toggleOpen = () => {
установитьоткрыть(!открыть)
}
Теперь вы можете использовать значение open для создания динамических классов CSS, например:
<div className={открыть? стили.sidenav: стили.sidenavClosed}>
<кнопка className={styles.menuBtn} onClick={toggleOpen}>
{открытым? <КлавиатураDoubleArrowLeftIcon />: <КлавиатураDoubleArrowRightIcon />}
</button>
{navData.map (элемент =>{
возвращаться <Ключ NavLink={item.id} className={styles.sideitem} to={item.link}>
{item.icon}
<span className={открыть? стили.linkText: стили.linkTextClosed}>{элемент.текст}</span>
</NavLink>
})}
</div>
Используемые имена классов CSS будут определяться открытым состоянием. Например, если open имеет значение true, внешний элемент div будет иметь имя класса sidenav. В противном случае класс будет sidenavClosed.
То же самое и со значком, который меняется на значок со стрелкой вправо, когда вы закрываете боковую панель.
Не забудьте импортировать его.
импорт клавиатурадвойнойстрелкаправозначок из '@mui/icons-material/KeyboardDoubleArrowRight';
Компонент боковой панели теперь можно свернуть.
Возьмите полный код отсюда Репозиторий GitHub и попробуйте сами.
Стилизация компонентов React
React упрощает создание складного навигационного компонента. Вы можете использовать некоторые инструменты, предоставляемые React, такие как react-router-dom, для обработки маршрутизации и перехватчиков, чтобы отслеживать свернутое состояние.
Вы также можете использовать модули CSS для стилизации компонентов, хотя это и не обязательно. Используйте их для создания уникальных классов с локальной областью действия, которые можно извлечь из файлов пакетов, если они не используются.