TypeError: Object(...)(...) is undefined in AuthRoute

[aindriu80]

AuthRoute.js
`
import React, { useContext } from "react";
import { Route, Redirect } from "react-router-dom";

import { AuthContext } from "../context/auth";

function AuthRoute({ component: Component, ...rest }) {
const { user } = useContext({ AuthContext });

return (
<Route
{...rest}
render={(props) =>
user ? : <Component {...props} />
}
/>
);
}
export default AuthRoute;
`

Gets the following Error:

TypeError: Object(...)(...) is undefined

[mariusflorescu]

Hello @aindriu80 !

At line 7:
const { user } = useContext({ AuthContext });
Should be changed to:
const { user } = useContext(AuthContext); //delete the curly braces {}

And since you're working on the Auth Route , you should be redirecting any user that attempts to go to routes such as "/login" or "/register" to the home page.

That being said at line 13 you should change from:
user ? : <Component {...props} />
to:
user ? <Redirect to="/"/> : <Component {...props}/>

So, the AuthRoute.js should look like this:

import React, {useContext} from 'react'
import {Route,Redirect} from 'react-router-dom'

import {AuthContext} from './context/auth'

function AuthRoute({component: Component, ...rest}){
  const {user} = useContext(AuthContext);
  
  return (
    <Route 
      {...rest}
      render={props => 
        user ? <Redirect to="/"/> : <Component {...props}/>
      }/>
  )
}

export default AuthRoute

[aindriu80]

That worked a treat, thanks!!

[mariusflorescu]

Your welcome,@aindriu80!
You can mark the issue as closed 😁.