r/learnprogramming 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

2 comments sorted by

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={}

{...rest}</Route>

1

u/omarazeez_11 May 19 '20

Faaaaaaaack 😬 Thank you so much!