Warning: You should not use <Route component> and <Route render> in the same route; <Route render> will be ignored
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} />
)
}
/>
);
Use <Route render={() => <YourComponent />} />
instead of <Route component={YourComponent} />
.
Don't combine two of those, react does not like that.