in react how to use reusable component as React Component to pass into react-router-dom Component prop?

Question

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: &nbsp;
              <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>
    );
  };

Seems like a really simple thing to test. Have you tried it? I suspect it won't work and you'll need to render an anonymous component, i.e. component: () => <ImageFirst ......./>. — Drew Reese
– Drew Reese, Commented Feb 25, 2021 at 8:01

Drew Reese · Accepted Answer · 2021-02-25 08:06:24Z

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,
  },
];

Collectives™ on Stack Overflow

in react how to use reusable component as React Component to pass into react-router-dom Component prop?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related