reactjs - React ERROR:TypeError:无法读取未定义的属性“路径名”
问题描述
这是我的Menu
组件。我稍后将其导入routes.js
. 我收到此错误。
TypeError: Cannot read property 'pathname' of undefined
在搜索它并查看一些解决方案之后,看起来这可能是一个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;
路由.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;
解决方案
将路由道具“注入”到组件中
您可以渲染AdminNavbar
为component
、render
或children
渲染方法:
const AppRouter = () => {
return (
<Router>
<div>
<Switch>
<Route path="/navbar" component={AdminNavbar} />
</Switch>
</div>
</Router>
);
};
或者AdminNavbar
用withRouter高阶组件装饰
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);
推荐阅读
- mysql - 将 GROUP_CONCAT 设置为行组,而不单独重复分组的行
- registry - 如何使编辑一个键自动更新注册表中其他与图标相关的键?
- ios - 加载照片库 iOS 14 访问受限
- apache - 尝试调试 .htaccess 文件
- gpu - 我可以为 cuda 版本 11.2 安装 cudnn 吗?
- c# - C# 中 IF ELSE 语句中大括号的规则是什么
- google-analytics - 是否可以将 Google Analytics 集成到我的 JS 库中
- javascript - 传单:如何仅在多边形内显示图层
- node.js - docker-compose:使用节点连接到 mongodb
- mysql - 与本地服务器上的 MariaDB 相比,RDS MySql 上的 COUNT WHERE 性能慢