Javascript 在react中，如何使用可重用组件作为react组件传递到react路由器dom组件属性？

我有以下react可重用组件，我可以在react路由器dom中将其用作react组件吗？我是新手，非常感谢你的帮助

当我使用这段代码时，我得到了错误：var组件：（（props:props）=>JSX.Element）| JSX.Element JSX元素类型“Component”没有任何构造或调用签名

 const ImageFirst = ({ imgSrc, title, desc, link, linkTitle }: Props) => {
      return (
        <div className="SRFoods">
          <div className="SRFoodsImg">
            <img src={imgSrc} alt="" width="100%" height="auto" />
          </div>
          <div className="content">
            <h1>{title}</h1>
            <p>{desc}</p>
            <h4>
              For More Info, Go to: &nbsp;
              <a href={link} target="_blank" rel="noopener noreferrer">
                {linkTitle}
              </a>
            </h4>
          </div>
        </div>
      );
    };

constimagefirst=（{imgSrc，title，desc，link，linkTitle}:Props）=>{
返回(
{title}
{desc}

有关更多信息，请转到：
);
};

//App.js页面

import ImageFirst from "./components/Pages/ImageFirst";
import SRFoodsImg from './assets/srproducts.png'
import Home from "./pages/Home";

const App: React.FC = () => {
  const routes = [
    { path: "/", name: "Home", Component: Home },
    { path: "/food/sragro", Component: <ImageFirst
    imgSrc={SRFoodsImg}
    title="SR Agro"
    desc="testofdesc"
    linkTitle="http://srfoods.com.np"
    link="http://srfoods.com.np"
    /> },
  ];
  return (
    <BrowserRouter>
      <>
        <Navbar />
        {routes.map(({ path, Component }) => (
          <Route key={path} exact path={path}>
            {({ match }) => (
              <div className="page">
                  <Component />
                </div>
            )}
          </Route>
        ))}
        <Footer />
      </>
    </BrowserRouter>
    );
  };

从“/components/Pages/ImageFirst”导入ImageFirst；
从“./assets/srproducts.png”导入SRFoodsImg
从“/pages/Home”导入主页；
常量应用程序：React.FC=（）=>{
常数路由=[
{路径：“/”，名称：“Home”，组件：Home}，
{路径：“/food/sragro”，组成部分：}，
];
返回(
{routes.map（{path，Component}）=>(
{（{match}）=>(
)}
))}
);
};

我相当确定您不能将完全实例化的组件传递给

路由的
组件
道具，但您可以传递匿名功能组件

const routes = [
  {
    path: "/",
    name: "Home",
    Component: Home,
  },
  {
    path: "/food/sragro",
    Component: () => (
      <ImageFirst
        imgSrc={SRFoodsImg}
        title="SR Agro"
        desc="testofdesc"
        linkTitle="http://srfoods.com.np"
        link="http://srfoods.com.np"
      />
    ),
  },
];

const路由=[
{
路径：“/”，
姓名：“家”，
组成部分：家庭，
},
{
路径：“/food/sragro”，
组件：（）=>(
),
},
];

这几乎等同于提前定义组件

const CustomImageFirst = () => (
  <ImageFirst
    imgSrc={SRFoodsImg}
    title="SR Agro"
    desc="testofdesc"
    linkTitle="http://srfoods.com.np"
    link="http://srfoods.com.np"
  />
);

...

const routes = [
  {
    path: "/",
    name: "Home",
    Component: Home,
  },
  {
    path: "/food/sragro",
    Component: CustomImageFirst,
  },
];

constCustomImageFirst=（）=>(
);
...
常数路由=[
{
路径：“/”，
姓名：“家”，
组成部分：家庭，
},
{
路径：“/food/sragro”，
组件：CustomImageFirst，
},
];
似乎是一个非常简单的测试。你试过了吗？我怀疑它不起作用，您需要呈现一个匿名组件，即
组件：（）=>
。谢谢，它起作用了，但为什么？