I have the following react reusable component, can i use it as react component in the react-router-dom here? I m new to react, thank you so much for your help.......................................................................................................
when i use this code i get error: var Component: ((props: Props) => JSX.Element) | JSX.Element JSX element type 'Component' does not have any construct or call signatures.
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:
<a href={link} target="_blank" rel="noopener noreferrer">
{linkTitle}
</a>
</h4>
</div>
</div>
);
};
//App.js page
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>
);
};
I am fairly certain you can't pass a fully instantiated component to the component
prop of a Route
, but you can pass an anonymous functional component.
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"
/>
),
},
];
This would be nearly the equivalent of defining a component ahead of time.
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,
},
];
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.