使用 Reactjs 渲染两个不同的组件

Question

I've 2 different components, and I would like to render them separately. Logic is simple when user is logged in render 1st component , if it's not render default component .

Please review my code, and help me with this, I'm not good at react, so please help me

export default function App(props) {
     const Authenticated = props.Authenticated
     const RoutingCabinet = (
         <React.Fragment>
             <Header/>
             <Switch>
                 <Route exact path = '/'    component = { () => TempBody} />
                 <Route exact path = '/new' component = { () => <ResponsiveDrawer />}/>
             </Switch>
             <Footer/>
         </React.Fragment>
     );
     const RoutingContent = (
         <React.Fragment>
             <Cabinet />
             <Switch>
                 <Route exact path = '/user.test'component = { () => <div>Element</div> }/>   
             </Switch>
         </React.Fragment>
     );
     return(
         <ThemeProvider theme = {Theme}>
             <BrowserRouter>
                 { 
                   Authenticated 
                 ? RoutingCabinet 
                 : RoutingContent
                 }
             </BrowserRouter>
         </ThemeProvider>
     );
}

Currently I can see only RoutingCabinet

Here is the index.js

ReactDOM.render(<App Authenticated = {false} />, document.getElementById('__body__', '__root__'));

Answer 1

I may be wrong here, but is <Cabinet /> the same as <RoutingCabinet /> ? If so, it might work ok. The <div>Element</div> will be visible only if url matches user.test . If you are on any other page, this won't be rendered, so it'll look like <RoutingCabinet /> is rendered, while in fact it's <RoutingContent /> , it just renders the same output.