Layout 无法显示任何内容，我想知道如何解决使用 Route with Layout 的问题？

Question

在更改代码之前，我可以同时显示 HomeScreen 和 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

这是工作 enter image description here

当我将代码更改为 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

完全没有错误。 enter image description here

但没有任何显示。

enter image description here

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

Answer 1

在 React Router V6 中，我们使用 element 属性将组件渲染为 Route。 This answer from a similar post gives a good explanation.

您还需要将应用程序包装在 BrowserRouter 中。假设您所有的路线都使用相同的布局，我建议您安排您的应用程序如下：

const App = () => {

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

Layout 无法显示任何内容，我想知道如何解决使用 Route with Layout 的问题？

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

javascript

layout

reactjs

react-router-dom