无法读取 React-Hook 中未定义的属性'pathname'

Question

它以前运行良好。

但现在不行了。

原因是什么？

我该怎么办？

无法读取位置道具。

添加了路由器到标题代码，

然后这次在FriendsHeader中出现了一个错误。

这是我的FriendsHeader代码

import React from "react";
import styled from "styled-components";
import { Container } from "../BaseLabel";
import { Link, withRouter } from "react-router-dom";
const FriendstHeader = ({ location: { pathname } }) => {
return (
<>
<FriendContainer>
<Icons>
{
<Links to="/setting">
<div current={pathname === "/setting"}>
<img src={Cog} width="18px" height="18px" alt="" />
</div>
</Links>
}
</Icons>
</FriendContainer>
</>
);
};
export default withRouter(FriendstHeader);

此React路由器代码

import React from "react";
import {
HashRouter as Router,
Route,
Switch,
Redirect,
} from "react-router-dom";
export default () => (
<Router>
<>
<Header />
<Switch>
<Route path="/" exact component={Friends} />
<Route path="/chats" component={Chats} />
<Route path="/shap" component={Shap} />
<Route path="/more" component={More} />
<Route path="/setting" component={Setting} />
<Route path="/covid19" component={Covid19} />
<Route path="/kakaotv" component={KakaoTV} />
<Route path="/fun" component={Fun} />
<Route path="/entertain" component={Entertain} />
<Route path="/sports" component={Sports} />
<Route path="/openchats" component={OpenChat} />
<Redirect from="*" to="/" />
</Switch>
<Navgation />
</>
</Router>
);

Answer 1

不确定它是如何工作的，但您需要将路由器位置作为道具传入，或者在导出Header组件时使用withRouter，例如在Header组件文件中具有

import { withRouter } from "react-router";

然后在导出时：

export default withRouter(Header);

https://reactrouter.com/web/api/withRouter