TypeError: undefined is not an object (evaluating 'this.props.location') [ReactJS + react-router-dom V4]

Question

我正在开发 ReactJS 应用程序。对于我的路由设置，我使用 react-router-dom V4.

我的问题如下：我正在尝试访问文件中的 "location.pathname"。尽管如此，我还是得到了错误：

TypeError: undefined is not an object (evaluating '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);

侧面样本-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：我根据用户类型（1 或2)、在一个动作如下：

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

const 侧边栏然后发送到我这边-menu.js。

Answer 1

您不能直接从配置中引用 this.props.location，因为没有 this 上下文。（就此而言，也没有 props 上下文）。

你可以做的是将用户类型从 redux 存储传递到 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 存储在 redux-store 中才有意义，而不是存储整个 render 布局。

TypeError: undefined is not an object (evaluating 'this.props.location') [ReactJS + react-router-dom V4]

TypeError: undefined is not an object (evaluating 'this.props.location') [ReactJS + react-router-dom V4]

reactjs

react-router-dom