Routing Option react router dom

Question

I am developing a back-office application using Admin-LTE. Below is my base structure in App.js I am using the default login page included in adminLte, here the link for convenience (https://adminlte.io/themes/v3/pages/examples/login.html)

My index page, where the user is supposed to login now looks like this:

which is clearly not correct. The sidebar, header, footer should be hidden when the user is not logged in. Of course I can conditionally render these components based on my auth status. But, I wonder, is there a simple way in react to manange authenticated or not authenticated routes so not to overlap ui components. SEE "@IDEA" Basically have two Routes elements

import React from 'react'
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'

// @ layout
import Content from './components/Layout/Content'
import Header from './components/Layout/Header'
import Sidebar from './components/Layout/Sidebar'
import Footer from './components/Layout/Footer'

// @ pages
import Users from './components/Pages/Users'
import Login from './components/Pages/Login'

export default function App() {
  return (
    <>
    <Router>
      <div>
        <Header />
        <Sidebar />
        <Routes>
          <Route path="/" element={<Login />} />
          <Route path="/users" element={<Users />} />
        </Routes>
        <Footer />
      </div>
    </Router>
    </>
  )
}

@IDEA

export default function App() {
  return (
    <>
    <Router>
      <div>

        <Routes>
          <Route path="/" element={<Login />} />
          <Route path="/register" element={<Register />} />
        </Routes>
        
        <Routes  element={<AuthenticatedRoutes />}>
          <Header />
          <Sidebar />
          <Route path="/" element={<Login />} />
          <Route path="/users" element={<Users />} />
          <Footer />
        </Routes>
        
      </div>
    </Router>
    </>
  )
}

Solution found so far:

export default function App() {
  return (
    <>
    <BrowserRouter>
      <div>
        <Routes>
          <Route path="/" element={<Login />} />
          <Route path="/users" element={<><Header /><Sidebar /><Users /><Footer /></>} />
        </Routes>
      </div>
    </BrowserRouter>
    </>
  )
}

Answer 1

Make a sepearate components for the components that you want to display when route is /users, in Users or move them in Users.

    function UsersView() {
      
      return (
        <>
          <Header />
          <Sidebar />
          <Users />
          <Footer />
        </> 
      )
    }

    export default function App() {

      return (
        <BrowserRouter>
          <div>
            <Routes>
              <Route path="/" element={<Login />} />
              <Route path="/users" element={<UsersView />} />
            </Routes>
          </div>
        </BrowserRouter>
      )
    }