Как в реакт подгружать меню не обновляя его свойств при перерендере?

приложение SPA react, сверху грузится шапка, с боку боковое меню с ant.design - https://ant.design/components/menu/

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

import React from 'react';
import ReactDOM from 'react-dom';
import { Link } from "react-router-dom";
import { Menu, Icon, Button } from 'antd';
import Logo from "../logo";
import "antd/dist/antd.css";
import './index.scss'
import logo from '../logo';

const { SubMenu } = Menu;

export default class LeftMenu extends React.Component {
  state = {
    collapsed: true,
  };
  
  toggleCollapsed = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  };

  render() {
    return (
      <div className="navigation">
        <div className="navigation-button" onClick={this.toggleCollapsed}>
          <Logo />
        </div>
        <Menu
          className="leftMenu"
          defaultSelectedKeys={['1']}
          // defaultOpenKeys={['sub1']}
          mode="inline"
          theme="dark"
          inlineCollapsed={this.state.collapsed}
        >
          <Menu.Item key="1">
            <Link to="/"><Icon type="home" />
              <span>Wellcome Page</span>
            </Link>
          </Menu.Item>
          <Menu.Item key="2">
            <Link to="/a3">
              <Icon type="desktop" />
              <span>a3</span>
            </Link>
          </Menu.Item>
          <Menu.Item key="3">
            <Link to="/a2">
              <Icon type="tag" />
              <span>a2</span>
            </Link>
          </Menu.Item>
          <Menu.Item key="4">
            <Link to="/a1">
              <Icon type="bar-chart" />
              <span>a1</span>
            </Link>
          </Menu.Item>
          <SubMenu
            key="sub1"
            title={
              <span>
                <Icon type="block" />
                <span>Dashboards</span>
              </span>
            }
          >
            <Menu.Item key="5"><Link to="/dashboards/av">av</Link></Menu.Item>
            <Menu.Item key="6"><Link to="/dashboards/1">1</Link></Menu.Item>
            <Menu.Item key="7"><Link to="/dashboards/2">2</Link></Menu.Item>
            <Menu.Item key="8"><Link to="/dashboards/3">3</Link></Menu.Item>
            <Menu.Item key="9"><Link to="/dashboards/4">4</Link></Menu.Item>
            <Menu.Item key="10"><Link to="/dashboards/5">5</Link></Menu.Item>
            <Menu.Item key="11"><Link to="/dashboards/6">6</Link></Menu.Item>
            <Menu.Item key="12"><Link to="/dashboards/7">7</Link></Menu.Item>
          </SubMenu>
        </Menu>
      </div>
    );
  }
}


подгружается как <LeftMenu />
  • Вопрос задан
  • 305 просмотров
Пригласить эксперта
Ответы на вопрос 2
hzzzzl
@hzzzzl
может проще вместо Link использовать NavLink, тогда будет свойство activeClassName , зависящее от url

https://github.com/ReactTraining/react-router/blob...
Ответ написан
@Dasslier
FrontEnd Developer
Не какой-то профи в Реакте, но с чего вы взяли, что происходит перерендер? Если идет смена активного класса, то Реакту на такое должно быть по боку, т.к. он сравнивает дом дерево по ключам, а не классам. Если у компонента не меняется ни стейт, ни пропсы, он тогда не будет делать ререндер

П.С. Сделайте массив с данными меню, а потом 1 раз через map отрисуйте все, зачем делать этот копипаст ужасный?
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы