Ошибка типа: undefined не является объектом (оценивается как this.props.location) [ReactJS + response-router-dom V4]

Question

Я занимаюсь разработкой приложения ReactJS. Для настройки маршрутизации я использую реагирующий маршрутизатор dom V4.

Моя проблема заключается в следующем: я пытаюсь получить доступ к "location.pathname" в файле. Тем не менее, я получаю ошибку:

TypeError: undefined не является объектом (оценка 'This.props.location')

Пример side-menu_user-types.js:

import React from 'react';
import { Menu, Icon } from 'antd';
import { NavLink, withRouter } from 'react-router-dom';

const SubMenu = Menu.SubMenu;

//sidebar for each user type
const config = {
  1: {
    desc: [
      <Menu theme="dark" mode="inline" defaultSelectedKeys={[this.props.location.pathname]}>
        <Menu.Item key="/home">
          <NavLink to="/home">
            <Icon type="home"/>
            <span>home</span>
          </NavLink>
        </Menu.Item>
      </Menu>
    ],
  },
  2: {
    desc: [
      <Menu theme="dark" mode="inline" defaultSelectedKeys={[this.props.location.pathname]}>
        <Menu.Item key="/home">
          <NavLink to="/home">
            <Icon type="home"/>
            <span>home</span>
          </NavLink>
        </Menu.Item>
        <Menu.Item key="/nav1">
          <NavLink to="/nav1">
            <Icon type="star-o"/>
            <span>nav 1</span>
          </NavLink>
        </Menu.Item>
      </Menu>
    ],
  }
};

export default withRouter(config);

Пример side-menu.js:

import React from 'react';
import { Layout } from 'antd';
import { connect } from 'react-redux';

const { Sider } = Layout;

class SideMenu extends React.Component {

  render() {
    return (
      <Sider
        className="sider"
        trigger={null}
        collapsible
        collapsed={this.props.collapsed}
        >
          <div className="logo"/>
          {this.props.sidebar}
        </Sider>
    );
  }
}

const mapStatetoProps = state => ({
  sidebar: state.user.sidebarLoggedIn,
});

export default connect(mapStatetoProps)(SideMenu);

PS: я получаю боковую панель ("this.props.sidebar") в side-menu.js из side-menu_user-types.js, в соответствии с типом пользователя (1 или 2), следующим образом:

• const sidebar = config[1].desc[0] => user type #1;
• const sidebar = config[2].desc[0] => user type #2.

Затем боковая панель const отправляется в мой side-menu.js.

Answer 1

Вы не можете ссылаться на this.props.location из конфигурации напрямую, так как нет контекста this. (Нет props контекста, а также в этом отношении).

То, что вы можете сделать, это передать тип пользователя из онлайн-хранилища в реквизит SideMenu. Затем используйте это, чтобы решить, какой тип навигационной панели вы хотите использовать.

Это может быть что-то вроде этого.

import React from 'react';
import { Layout } from 'antd';
import { connect } from 'react-redux';
import { Menu, Icon } from 'antd';
import { NavLink, withRouter } from 'react-router-dom';

const { Sider } = Layout;

class SideMenu extends React.Component {
  renderSideBar(props) {
      if(props.userType === '1') {
          return (
             <Menu theme="dark" mode="inline" defaultSelectedKeys={[props.location.pathname]}>
                 <Menu.Item key="/home">
                     <NavLink to="/home">
                         <Icon type="home"/>
                         <span>home</span>
                     </NavLink>
                 </Menu.Item>
             </Menu>
          );
      }
      else if(props.userType === '2') {
          return (
              <Menu theme="dark" mode="inline" defaultSelectedKeys={[props.location.pathname]}>
                  <Menu.Item key="/home">
                      <NavLink to="/home">
                          <Icon type="home"/>
                          <span>home</span>
                      </NavLink>
                 </Menu.Item>
                 <Menu.Item key="/nav1">
                    <NavLink to="/nav1">
                        <Icon type="star-o"/>
                        <span>nav 1</span>
                    </NavLink>
                 </Menu.Item>
             </Menu>
          );
      }
  }
  render() {
    return (
      <Sider
        className="sider"
        trigger={null}
        collapsible
        collapsed={this.props.collapsed}
        >
          <div className="logo"/>
          {this.renderSideBar(this.props)}
        </Sider>
    );
  }
}

const mapStatetoProps = state => ({
  userType: //get user type from state
});

export default withRouter(connect(mapStatetoProps)(SideMenu));

Имеет смысл хранить userType только в хранилище резервов, а не сохранять весь макет рендеринга .