How to load a menu in React without updating its properties when rerendering?

Question

React

SPA react application, a header is loaded on top, a side menu with ant.design on the side - https://ant.design/components/menu/
The problem is that with each change in the url, the menu is updated by changing the active class. Please tell me how to solve this problem. Thank you.

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 />

Answer 1

maybe it's easier to use NavLink instead of Link, then there will be an activeClassName property depending on the url
https://github.com/ReactTraining/react-router/blob...

Answer 2

Not some React pro, but what makes you think a rerender is happening? If there is a change in the active class, then React should be on the side of this, tk. it compares the house tree by key, not by class. If the component does not change either the state or the props, then it will not render
P.S. Make an array with the menu data, and then draw everything through the map once, why do this terrible copy-paste?