Reactjs React路由器useHistory挂钩返回未定义

当我点击一个按钮时，我试图使用react router dom中的useHistory，但它返回未定义的，因此我无法推送新页面url

我的组件是路线的内部组件，如下图所示：

这是我的简单登录组件代码：

export default function Login() {
  let history = useHistory();

  function onEnterAsGuest() {
    history.push("/example");
  }

  return (
    <Container>
      <Logo></Logo>
      <WelcomeTextContainer>
        <StyledHeading>Welcome!</StyledHeading>
      </WelcomeTextContainer>
      <ButtonContainer>
        <Button
          primary
          text={"Enter as guest"}
          onClick={onEnterAsGuest}
          block
        />
      </ButtonContainer>
    </Container>
  );
}

你能帮我调试一下吗？不知道还能在哪里检查错误

---

提前感谢。

不要将组件作为函数调用。

---

使用

而不是

{Routes（width）}

让我们看看您的路由文件这些是版本：

react@17.0.1

|

反应-dom@17.0.1

|

反应路由器-dom@5.2.0

刚刚在初始描述中添加了路线定义否，我没有该软件包。我从

react router dom

导入了所有内容，我的路由器是hashrouter，它工作得非常好！谢谢@AjeetShah

import { HashRouter as Router, Switch, Route, Link } from "react-router-dom";

...

export default function App() {
  const { width } = useWindowDimensions();

  return (
    <Router>
      <Switch>
        {Routes(width)}

        <Route path="*">
          <p>
            Wrong path! Return to <Link to="/">Home Page</Link>
          </p>
        </Route>
      </Switch>
    </Router>
  );
}

export default function Routes(width: number) {
  return routes.map((route) => {
    return (
      <Route exact path={route.path} key={route.path}>
        {width > 720
          ? DesktopVersion(route.component)
          : MobileVersion(route.component)}
      </Route>
    );
  });
}

const routes: IRoute[] = [
  {
    path: "/",
    component: Login,
  },
  {
    path: "/example",
    component: () => (
      <p style={{ marginTop: "100px" }}>
        <Link to="/another" style={{ color: "salmon" }}>
          This is a link
        </Link>
      </p>
    ),
  },
  {
    path: "/another",
    component: () => (
      <p>
        <Link to="/example" style={{ color: "salmon" }}>
          Hello world
        </Link>
      </p>
    ),
  },
];