React useRouteMatch（）-无效的挂钩调用

Question

我在这里有一个演示 https://stackblitz.com/edit/react-ts-p5vdeq?file=Info.tsx

我正在尝试创建一个简单的嵌套导航。

我有两页首页和信息

“信息”页面具有导航，以显示该页面上的组件。

在“信息”页面上，我收到错误消息Invalid hook call. Hooks can only be called inside of the body of a function component.

函数中使用了钩子，我确定我没有违反钩子规则。

能看到我为什么收到此错误

import React from "react";
import { Link, Route, useRouteMatch } from "react-router-dom";

const Info: React.FC = () => {
  const { path, url } = useRouteMatch();
  return (
    <div>
      <h2>Info</h2>
      <ul>
        <li>
          <Link to={`${url}/linkone`}>Info Link One</Link>
        </li>
        <li>
          <Link to={`${url}/linktwo`}>Info Link Two</Link>
        </li>
      </ul>

      <div>
        <Route exact path={`${path}/linkone`}>
          <h1>Info One</h1>
        </Route>
        <Route exact path={`${path}/linktwo`}>
          <h1>Info Two</h1>
        </Route>
      </div>
    </div>
  );
};

export default Info;