CODEWITHSUNDEEP
javascriptreactjsreact-router
Kevin Nett
Kevin Nett

Reputation: 429

How to render a component without using a Route element

This is my React component:

const Auth = () => {  

useEffect(() => { 
document.body.classList.add("bg-default");  
return () => {  
document.body.classList.remove("bg-default");      
}    
}, [])    

const { isAuthenticated } = useAuth0();  

if (isAuthenticated){  
return <AdminLayout><Dashboard/></AdminLayout>      
}  return (

But It's a problem I can't understand. AdminLayout works in every component but when I return it in the way above I get: TypeError: Cannot read property 'pathname' of undefined

The error is in this:

<AdminNavbar {...this.props} 
brandText{this.getBrandText(this.props.location.pathname)} />

I think it's about react-router but I don't how to fix it, I'm not very confident with react-router.

I fixed in this way:

const Auth = () => {  

useEffect(() => { 
document.body.classList.add("bg-default");  
return () => {  
document.body.classList.remove("bg-default");      
}    
}, [])    

const { isAuthenticated } = useAuth0();  

if (isAuthenticated){  
return <AdminLayout><Dashboard/></AdminLayout>      
}  return (

But It's a problem I can't understand. AdminLayout works in every component but when I return it in the way above I get: TypeError: Cannot read property 'pathname' of undefined

The error is in this:

<AdminNavbar {...this.props} 
brandText{this.getBrandText(this.props.location.pathname)} />

Upvotes: 1

Views: 63

Answers (1)

Francesco Esposto
Francesco Esposto

Reputation: 184

It would appear that AdminLayout expects a prop called location, itself having a prop called pathname. I suppose you could either render it as <AdminLayout location={window.location} />, or change this.props.location.pathname to window.location.pathname, this assuming that you're trying to render different texts depending on where the user is.

Upvotes: 1

Related Questions