React Component as a prop

Question

I was trying to pass a component as prop s to make authenticated routes, but inst working, i tried to search on documentation how to do it or in the web, but unfortunately i didnt found. So heres is my component

 import { useSelector } from "react-redux"
 import { Redirect, Route as ReactRoute } from "react-router-dom/cjs/react-router-dom.min"
export const Route = ({isPrivate=false, Component, ...rest}) =>{
    const { acessToken } = useSelector(store=>store)
    return(
        <ReactRoute  {...rest} render={()=> isPrivate === !!acessToken ? <Component/> : <Redirect to={isPrivate ? '/' : '/dashboard'}/>} />
    )
}

Can anyone give me a hint on this ?

score 0 · Answer 1 · answered Dec 28 '21 at 13:51

0

when you want to pass component as a prop you can use the under below method

export const Route = (Component) => {
  return (props) => {
    return <Component {...props} {...resourceProps} />;
  };
};

answered Dec 28 '21 at 13:51

RamTn

99
5

score 0 · Accepted Answer · answered Dec 28 '21 at 13:53

I understood what you are trying to achieve.

function PrivateRoute ({isPrivate=false, component: Component, ...rest}) {
  const { acessToken } = useSelector(store=>store)
  return (
    <Route
      {...rest}
      render={(props) => isPrivate === !!acessToken 
        ? <Component {...props} />
        : <Redirect to={isPrivate ? '/' : '/dashboard'}/>}
    />
  )
}

Here is a great example:

How to implement authenticated routes in React Router 4?

React Component as a prop

2 Answers2