score:22

Accepted answer

from route rendering method:

there are 3 ways to render something with a <route>:

- <route component>
- <route render>
- <route children>

each is useful in different circumstances. you should use only one of these props on a given

privateroute contains both component and render prop. you can only use one rendering method but not both.

<privateroute exact path="/dashboard" component={dashboard}></privateroute> // here

const privateroute = ({
  ...
}) => (
  <route
    render={props => ()} // here
  />
);

fix : rename component prop to comp since it's acting as an hoc:

// rename prop to `comp`
<privateroute exact path="/dashboard" comp={dashboard}></privateroute>

const privateroute = ({
  comp: component, // use comp prop
  auth: { isauthenticated, loading },
  ...rest
}) => (
  <route
    {...rest}
    render={props =>
      !isauthenticated && !loading ? (
        <redirect to="/login" />
      ) : (
        <component {...props} />
      )
    }
  />
);

score:4

use <route render={() => <yourcomponent />} /> instead of <route component={yourcomponent} />.

don't combine two of those, react does not like that.


Related Query

More Query from same tag