React Router useHistory 钩子返回未定义

Question

当我点击一个按钮时，我试图使用 react-router-dom 中的 useHistory，但它返回 undefined，所以我无法推送新的页面 url。

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

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

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>
  );
}

这是我实例化路由器的方式：

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>
    );
  });
}

这是我循环遍历的 routes 对象：

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>
    ),
  },
];

你能帮我调试一下吗？不知道还有什么地方可以检查错误...

提前致谢。

Answer 1

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

使用 <Routes width={width}/> 而不是 {Routes(width)}。