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