如何在不使用 Route 元素的情况下渲染组件

Question

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)} />

Answer 1

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.