Reactjs 反应错误：TypeError:无法读取属性'；路径名'；未定义的

这是我的

菜单

组件。我随后将其导入

routes.js

。我得到了这个错误

TypeError:无法读取未定义的属性“pathname”

在搜索它并查看一些解决方案之后，看起来这可能是一个

route.js

。有一些解决方案，建议使用

this.props.history.location.pathname

，但不起作用

我也在下面发布了

routes.js

Navbar.js组件

class Menu extends Component {
      constructor(props) {
        super(props);
        this.state = {
          collapseOpen: false,
          modalSearch: false,
          color: "navbar-transparent",
          isFull: false,
        };
      }

      goFull = () => {
        this.setState({ isFull: true });
      };

      componentDidMount() {
        window.addEventListener("resize", this.updateColor);
      }
      componentWillUnmount() {
        window.removeEventListener("resize", this.updateColor);
      }
      // function that adds color white/transparent to the navbar on resize (this is for the collapse)
      updateColor = () => {
        if (window.innerWidth < 993 && this.state.collapseOpen) {
          this.setState({
            color: "bg-white",
          });
        } else {
          this.setState({
            color: "navbar-transparent",
          });
        }
      };
      // this function opens and closes the collapse on small devices
      toggleCollapse = () => {
        if (this.state.collapseOpen) {
          this.setState({
            color: "navbar-transparent",
          });
        } else {
          this.setState({
            color: "bg-white",
          });
        }
        this.setState({
          collapseOpen: !this.state.collapseOpen,
        });
      };
      // this function is to open the Search modal
      toggleModalSearch = () => {
        this.setState({
          modalSearch: !this.state.modalSearch,
        });
      };
      render() {
        return (
          <Fullscreen
            enabled={this.state.isFull}
            onChange={(isFull) => this.setState({ isFull })}
          >
            <Navbar
              className={classNames("navbar-absolute", {
                [this.state.color]:
                  this.props.location.pathname.indexOf("full-screen-map") === -1,
              })}
              expand="lg"
            >
              <Container fluid>
                <div className="navbar-wrapper">
                  <div className="navbar-minimize d-inline">
                    <Button
                      className="minimize-sidebar btn-just-icon"
                      color="link"
                      id="tooltip209599"
                      onClick={this.props.handleMiniClick}
                    >
                      <i className="icon-align-center visible-on-sidebar-regular" />
                      <i className="icon-bullet-list-67 visible-on-sidebar-mini" />
                    </Button>
                    <UncontrolledTooltip
                      delay={0}
                      target="tooltip209599"
                      placement="right"
                    >
                      Sidebar toggle
                    </UncontrolledTooltip>
                  </div>
                  <div
                    className={classNames("navbar-toggle d-inline", {
                      toggled: this.props.sidebarOpened,
                    })}
                  >
                    <button
                      className="navbar-toggler"
                      type="button"
                      onClick={this.props.toggleSidebar}
                    >
                      <span className="navbar-toggler-bar bar1" />
                      <span className="navbar-toggler-bar bar2" />
                      <span className="navbar-toggler-bar bar3" />
                    </button>
                  </div>
                  <NavbarBrand href="#pablo" onClick={(e) => e.preventDefault()}>
                    {this.props.brandText}
                  </NavbarBrand>
                </div>
                <button
                  className="navbar-toggler"
                  type="button"
                  data-toggle="collapse"
                  data-target="#navigation"
                  aria-expanded="false"
                  aria-label="Toggle navigation"
                  onClick={this.toggleCollapse}
                >
                  <span className="navbar-toggler-bar navbar-kebab" />
                  <span className="navbar-toggler-bar navbar-kebab" />
                  <span className="navbar-toggler-bar navbar-kebab" />
                </button>
                <Collapse navbar isOpen={this.state.collapseOpen}>
                  <Nav className="ml-auto" navbar>
                    <InputGroup className="search-bar" tag="li">
                      <Button
                        color="link"
                        data-target="#searchModal"
                        data-toggle="modal"
                        id="search-button"
                        onClick={this.toggleModalSearch}
                      >
                        <i className="icon-zoom-split" />
                        <span className="d-lg-none d-md-block">Search</span>
                      </Button>
                    </InputGroup>
                    <UncontrolledDropdown nav>
                      <DropdownToggle
                        caret
                        color="default"
                        data-toggle="dropdown"
                        nav
                      >
                        <div className="notification d-none d-lg-block d-xl-block" />
                        <i className="icon-sound-wave" />
                        <p className="d-lg-none">Notifications</p>
                      </DropdownToggle>
                      <DropdownMenu className="dropdown-navbar" right tag="ul">
                        <NavLink tag="li">
                          <DropdownItem className="nav-item">
                            Mike John responded to your email
                          </DropdownItem>
                        </NavLink>
                        <NavLink tag="li">
                          <DropdownItem className="nav-item">
                            You have 5 more tasks
                          </DropdownItem>
                        </NavLink>
                        <NavLink tag="li">
                          <DropdownItem className="nav-item">
                            Your friend Michael is in town
                          </DropdownItem>
                        </NavLink>
                        <NavLink tag="li">
                          <DropdownItem className="nav-item">
                            Another notification
                          </DropdownItem>
                        </NavLink>
                        <NavLink tag="li">
                          <DropdownItem className="nav-item">
                            Another one
                          </DropdownItem>
                        </NavLink>
                      </DropdownMenu>
                    </UncontrolledDropdown>
                    <UncontrolledDropdown nav>
                      <DropdownToggle
                        caret
                        color="default"
                        data-toggle="dropdown"
                        nav
                        onClick={(e) => e.preventDefault()}
                      >
                        <div className="photo">
                          <img alt="user preferences" src={UserIcon} />
                        </div>
                        <b className="caret d-none d-lg-block d-xl-block" />
                        <p className="d-lg-none">Log out</p>
                      </DropdownToggle>
                      <DropdownMenu className="dropdown-navbar" right tag="ul">
                        <NavLink tag="li">
                          <DropdownItem className="nav-item">Profile</DropdownItem>
                        </NavLink>
                        <NavLink tag="li">
                          <DropdownItem className="nav-item">Settings</DropdownItem>
                        </NavLink>
                        <DropdownItem divider tag="li" />
                        <NavLink tag="li">
                          <DropdownItem className="nav-item">Log out</DropdownItem>
                        </NavLink>
                      </DropdownMenu>
                    </UncontrolledDropdown>
                    <li className="separator d-lg-none" />
                  </Nav>
                </Collapse>
              </Container>
            </Navbar>
          </Fullscreen>
        );
      }
    }

    export default Menu;

类菜单扩展组件{
建造师（道具）{
超级（道具）；
此.state={
collapseOpen：错，
modalSearch：错，
颜色：“导航栏透明”，
isFull:错，
};
}
goFull=（）=>{
this.setState（{isFull:true}）；
};
componentDidMount（）{
window.addEventListener（“resize”，this.updateColor）；
}
组件将卸载（）{
removeEventListener（“resize”，this.updateColor）；
}
//在调整大小时向导航栏添加白色/透明颜色的函数（用于折叠）
更新颜色=（）=>{
if（window.innerWidth<993&&this.state.collapseOpen）{
这是我的国家({
颜色：“背景白色”，
});
}否则{
这是我的国家({
颜色：“导航栏透明”，
});
}
};
//此函数用于打开和关闭小型设备上的折叠
toggleCollapse=（）=>{
if（this.state.collapseOpen）{
这是我的国家({
颜色：“导航栏透明”，
});
}否则{
这是我的国家({
颜色：“背景白色”，
});
}
这是我的国家({
collapseOpen:！this.state.collapseOpen，
});
};
//此功能用于打开搜索模式
toggleModalSearch=（）=>{
这是我的国家({
modalSearch:！this.state.modalSearch，
});
};
render（）{
返回(
this.setState（{isFull}}
>
侧边栏切换
e、 preventDefault（）}>
{this.props.brandText}
搜寻
通知

迈克·约翰回复了你的电子邮件
您还有5项任务
你的朋友迈克尔在城里
另一通知
另一个
e、 preventDefault（）}
>
注销

轮廓
设置
注销

routes.js

import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

import AdminNavbar from "../components/Menu/Navbar";

const AppRouter = () => {
  return (
    <Router>
      <div>
        <Switch>
          <Route path="/navbar">
            <AdminNavbar />
          </Route>
        </Switch>
      </div>
    </Router>
  );
};

export default AppRouter;

从“React”导入React；
从“react Router dom”导入{BrowserRouter as Router，Route，Switch}；
从“./组件/菜单/导航栏”导入AdminNavbar；
常量批准器=（）=>{
返回(
);
};
导出默认批准程序；

将“注入”到组件中

您可以将

AdminNavbar

呈现为

组件

，

呈现

，或

子项

：

---

错误在Navbar.js中，请包含该组件代码。如果“Menu.js”，即

菜单

是该组件，则需要使用

withRouter

HOC装饰该组件，以接收路由道具，或呈现为

组件

，

呈现

，或

路由

的

子组件

道具。抱歉混淆。Menu.js是Navbar.js

const AppRouter = () => {
  return (
    <Router>
      <div>
        <Switch>
          <Route path="/navbar" component={AdminNavbar} />
        </Switch>
      </div>
    </Router>
  );
};

import { withRouter } from "react-router-dom";

class Menu extends Component {

  ...

  render() {
    return (
      <Fullscreen
        enabled={this.state.isFull}
        onChange={isFull => this.setState({ isFull })}
      >
        <Navbar
          className={classNames("navbar-absolute", {
            [this.state.color]:
              this.props.location.pathname.indexOf("full-screen-map") === -1
          })}
          expand="lg"
        >
          ...
        </Navbar>
      </Fullscreen>
    );
  }
}

export default withRouter(Menu);