Can't show any thing with Layout, I want to know How to fix this problem that using Route with Layout?

Question

before to change code I can show both HomeScreen and LoginScreen

import React, { useState } from 'react'
import { Container } from 'react-bootstrap'

import Header from './components/header/Header'
import Sidebar from './components/sidebar/Sidebar'
import HomeScreen from './screens/homeScreen/HomeScreen'

import './_app.scss'

  const App = () => {
  const [sidebar, toggleSidebar] = useState(false)

  const handleToggleSidebar = () => toggleSidebar(value => !value)
  return (

     <>
        <Header handleToggleSidebar={handleToggleSidebar} />
        <div className="app__container">
           <Sidebar
              sidebar={sidebar}
              handleToggleSidebar={handleToggleSidebar}
           />
           <Container fluid className="app__main">
              <HomeScreen />
           </Container>




        </div>
     </>
  )
}

export default App

it's work enter image description here

when I change code to Layout

import React, { useState } from 'react'
import { Container } from 'react-bootstrap'

import Header from './components/header/Header'
import Sidebar from './components/sidebar/Sidebar'
import HomeScreen from './screens/homeScreen/HomeScreen'
import LoginScreen from './screens/loginScreen/LoginScreen'

import { Navigate, Route, Routes } from 'react-router-dom'

import './_app.scss'




const Layout = ({ children }) => {
   const [sidebar, toggleSidebar] = useState(false)

   const handleToggleSidebar = () => toggleSidebar(value => !value)

   return (
      <>
         <Header handleToggleSidebar={handleToggleSidebar} />
         <div className='app__container'>
            <Sidebar
               sidebar={sidebar}
               handleToggleSidebar={handleToggleSidebar}
            />
            <Container fluid className='app__main '>
               {children}
            </Container>
         </div>
      </>
   )
}




const App = () => {



  return (


      <Routes>
         <Route path='/' exact>
            <Layout>
               <HomeScreen />
            </Layout>
         </Route>

         <Route path='/auth'>
            <LoginScreen />
         </Route>

         <Route path='/search'>
            <Layout>
              <h1>asfaasfas</h1>
            </Layout>
         </Route>

         <Route>
            <Navigate to="/" />
         </Route>
      </Routes>

   )
}

export default App

It has no errors at all. enter image description here

but nothing shows.

enter image description here

...........................................................................

Answer 1

In React Router V6 , we render a component to a Route using the element prop. This answer from a similar post gives a good explanation .

You also need to wrap your App in a BrowserRouter . Assuming all your routes use the same layout, I'd recommend arranging your app is follows:

const App = () => {

    <BrowserRouter>
        <Layout>
            <Routes>
                <Routes path='/' element={<HomeScreen />} />
                ...
            </Routes>
        </Layout>
    </BrowserRouter>
}