0

Доброго времени суток.

Я новенький в JS и, соответственно в реакте. Хотел у вас уточнить, есть ли возможность сделать код данного компонента "чище"? Прошу прощения, если вопрос или его постановка некорректны.

Перед Вами представлено ниже навигационное меню. Оно должно в зависимости от location.pathname выдавать различные наборы навигационных кнопок. Всего кнопки 3 штуки:

  1. переход на главную страницу
  2. Переход на страницу модерации
  3. Переход на страницу администратора

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

import React from 'react';
import { useSelector } from 'react-redux';
import { Link, useLocation } from 'react-router-dom';
import classes from './Navbar.module.css';

export default function Navbar() {
  const location = useLocation();
  const isChanged = useSelector((state) => state.shiftReducer.isChangedData);

  return (
      <nav className={classes.nav}>
        <ul className={classes.menu}>
          {location.pathname !== '/' ? (
            <li onClick={isHaveChanges(event)}>
              <Link to="/" className={'nav_button'}>
                На главную
              </Link>
            </li>
          ) : null}

          {location.pathname !== '/moderation' ? (
            <li onClick={isHaveChanges(event)}>
              <Link to="/moderation" className={'nav_button'}>
                Изменить график
              </Link>
            </li>
          ) : null}

          {location.pathname !== '/admin' ? (
            <li onClick={isHaveChanges}>
              <Link to="/admin" className={'nav_button'}>
                Управление
              </Link>
            </li>
          ) : null}
        </ul>
      </nav>
  );
}

1 ответ 1

0

Чтобы не копировать одинаковые элементы, вы можете сделать map по массиву. Попробуйте вынести информацию по роутам в массив с объектами например:

  export default function Navbar() {
  const location = useLocation();
  const isChanged = useSelector((state) => state.shiftReducer.isChangedData);

  const routes = [
    { route: '/', child: 'На главную' },
    { route: '/moderation', child: 'Изменить график' },
    { route: '/admin', child: 'Управление' },
  ]

  return (
    <nav className={classes.nav}>
      <ul className={classes.menu}>
        {routes.map((el) => {
          return location.pathname !== el.route
            ? <li onClick={isHaveChanges(event)}>
              <Link to="/" className={'nav_button'}>
                {el.child}
              </Link>
            </li>
            : null
        })}
      </ul>
    </nav>
  );
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.