Rendering two different components with 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__'));

use a redirect below your route component. maybe It would help — Gabriel Martinez Bustos, Jul 30 '20 at 16:52
Does this answer your question? [How to implement authenticated routes in React Router 4?](https://stackoverflow.com/questions/43164554/how-to-implement-authenticated-routes-in-react-router-4) — jmargolisvt, Jul 30 '20 at 16:58
Also, this two different components contains different elements, such as `
` `
` and etc, by logic when user access to **Cabinet** he must see `
` and `
` of **Cabinet** but not the default `
` `
` — Sabretooth, Jul 30 '20 at 17:34

score 0 · Answer 1 · answered Jul 30 '20 at 18:54

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.

Rendering two different components with Reactjs

1 Answers1