Reactjs 反应路由器，链接到组件并显示在url中

我有一个演示

这是一个简单的react应用程序，使用react路由器dom链接到主页和信息两个页面

在信息页面上，我还有两个链接

我想这些链接加载组件下面的链接在这一页上，这是可能的反应路由器

还可以将此链接添加到url，使其类似于

/info/infolinkone

这是做这件事的最好方法吗？你可以用另一种方法做

import React from "react";
import {Link} from 'react-router-dom'

const Info:React.FC = () => {
  return (
    <div>
      <h2>Info</h2>
      <ul>
        <li><Link>Info Link One</Link></li>
        <li><Link>Info Link Two</Link></li>
      </ul>

      <div>
        //Load components here
      </div>

    </div>
  );
};

export default Info;

从“React”导入React；
从“react router dom”导入{Link}
常量信息：React.FC=（）=>{
返回(
信息

信息链接一
信息链接二

//在此加载组件
);
};
导出默认信息；

如果这对您有帮助，请告诉我

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

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

      <div>
        <Route exact path={`${path}/linkone`}>
          //here you load your component
        </Route>
      </div>
    </div>
  );
};

export default Info;

从“React”导入React；
从“react router dom”导入{Link，Route，useRouteMatch}；
常量信息：React.FC=（）=>{
让{path，url}=useRouteMatch（）；
返回(
信息


信息链接一


信息链接二


//在这里加载组件
);
};
导出默认信息；

如果使用此代码

无效的钩子调用，则会出现此错误。钩子只能在函数组件的主体内部调用。

我已经修复了它，并安装了react router dependencie。没有必要为每个组件写入React.FC。您可以使用箭头函数直接写入