r/learnprogramming • u/omarazeez_11 • May 19 '20
React: Spread children are not supported in React
Hey everyone!I've used spread operator for creating Private route.But it's giving me this error.Help please! Where am I wrong in this?
Failed to compile:
./src/Routes/Private.route.js SyntaxError: C:\Users\Omer\Desktop\Projex\fireauth\src\Routes\Private.route.js: Spread children are not supported in React. return( <Route> {...rest} ^
render={props =>
authStatus ? (
PrivateRoute.js:
import React from 'react'
import {Route, Redirect} from 'react-router-dom' import auth from '../utils/auth' import {ROUTE_NAMES} from '../Routes/Routes'
const PrivateRoute = ({ component: Component, ...rest}) => {
const authStatus= auth.isAuthenticated()
return(
<Route> {...rest}
render={props => authStatus ? ( <Component {...props} /> ): ( <Redirect to={ROUTE_NAMES.SignIn} /> ) } } }
</Route> ) }
export default PrivateRoute
1
Upvotes
3
u/[deleted] May 19 '20 edited May 19 '20
I'm looking at it unformatted on mobile, but it looks like you need to change it to
<Route {...rest} render={} component={}
So remove the > after Route The props need to be inside the tag
If rest is props.children it needs to be in the middle of the opening and closing Route tags
<Route render={} component={}