Question

我正在开发ReactJS应用程序。对于我的路由设置，我使用react-router-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：我按照用户类型（1或2）从side-menu_user-types.js中检索side-menu.js中的sidebar（“ this.props.sidebar”），操作如下：

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上下文，因此无法直接从config引用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：未定义不是对象（正在评估“ this.props.location”）[ReactJS + react-router-dom V4]

1 个答案: