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

Question

之前效果不错

但是现在不行了

这是什么原因？

我该怎么办？

无法读取位置属性。

添加了 withRouter 到 header 代码，

那么这次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 Router 代码

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