Reactjs 如何在react-typescript和json文件中创建动态页面

我制作了一个应用程序，它有一个用户页面，每个用户都有自己的页面。这是我在app.tsx中的代码：

import React from "react";

import { NavLink,Link, Route, BrowserRouter } from "react-router-dom";

import {
  Home,
  About,
  Contact,
  Courses,
  Blog,
  BlogDetail,
  CourseDetail,
} from "./pages";

import { LayoutProvider } from "./layout";

interface AppProps {}

const users = [
  {
    name: `Param`,
  },
  {
    name: `Vennila`,
  },
  {
    name: `Afrin`,
  },
];

const UsersPage = () => {
  return (
    <>
      {
        users.map((user, index) => (
          <h5 key={index}>
            <Link to={`/user/${index + 1}`}>{user.name}'s Page</Link>
          </h5>
        ))
      }
    </>
  );
};

const UserPage = ({ match, location }) => {
  const { params: { userId } } = match;

  return (
    <>
      <p>
        <strong>User ID: </strong>
        {userId}
      </p>
      <p>
        <strong>User Name: </strong> 
        {users[userId - 1].name}
      </p>
    </>
  );
};

const App: React.FC<AppProps> = (props) => {
  return (
    <BrowserRouter>
      <LayoutProvider>
        <div className="content">
          <Route exact path="/" component={Home} />
          <Route path="/About" component={About} />
          <Route path="/Contact" component={Contact} />
          <Route path="/Courses" component={Courses} />
          <Route path="/Course-Detail" component={CourseDetail} />
          <Route path="/Blog" component={Blog} />
          <Route path="/Blog-Detail" component={BlogDetail} />

          <Link to="/users">Users</Link>
          <Route exact path="/users" component={UsersPage} />
          <Route exact path="/user/:userId" component={UserPage} />
        </div>
      </LayoutProvider>
    </BrowserRouter>
  );
};

export default App;

从“React”导入React；
从“react router dom”导入{NavLink，Link，Route，BrowserRouter}；
进口{
家，
关于
联系方式，
课程，
博客，
博客细节，
长尾，
}从“/页”；
从“/layout”导入{LayoutProvider}”；
接口AppProps{}
常量用户=[
{
名称：`Param`，
},
{
姓名：`Vennila`，
},
{
姓名：`Afrin`，
},
];
const UsersPage=（）=>{
返回(
{
users.map（（用户，索引）=>(
{user.name}的页面
))
}
);
};
const UserPage=（{match，location}）=>{
const{params:{userId}}=match；
返回(

用户ID:
{userId}


用户名：
{users[userId-1].name}

);
};
常量应用程序：React.FC=（道具）=>{
返回(
使用者
);
};
导出默认应用程序；

但这部分我有一个错误：

const UserPage = ({ match, location }) => {
  const { params: { userId } } = match;

  return (
    <>
      <p>
        <strong>User ID: </strong>
        {userId}
      </p>
      <p>
        <strong>User Name: </strong> 
        {users[userId - 1].name}
      </p>
    </>
  );
};

constuserpage=（{match，location}）=>{
const{params:{userId}}=match；
返回(

用户ID:
{userId}


用户名：
{users[userId-1].name}

);
};

如何将此部件转换为工作部件？使用匹配和位置时会出现以下错误：

• 绑定元素“match”隐式具有“any”类型
• 绑定元素“location”隐式具有“any”类型