在 Route React 中渲染组件

Question

I want to make to render children in father component, that's how i tried to make it but browser shows nothing eventually:

const MainLayout = props => {
    return (
        <div className='main-layout'>
            <Header />
            <div className='main'>
                {props.children}
            </div>
        </div>
    )
}

App.js

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Routes>
          <Route exact path="/" render={() => (
            <MainLayout>
              <Homepage />
            </MainLayout>
          )} />
        </Routes>
      </BrowserRouter>

Answer 1

You should use element proprety to render your component, assuming that you are using React Router Dom V6, component propriety for anterior versions, or simply like this, by wrapping inside the Route :

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Routes>
          <Route exact path="/">
            <MainLayout>
              <Homepage />
            </MainLayout>
          </Route>
        </Routes>
      </BrowserRouter>
    </div>
   )

Answer 2

Hope it helps...

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Routes>
          <Route exact path="/" element={<MainLayout />}>
            <Route path="/home" element={<Homepage />} />
          </Route>
        </Routes>
      </BrowserRouter>
    </div>
  )
}

and Add a Outlet component inside MainLayout Component

const MainLayout = props => {
  return (
    <>
      <div className="main-layout">
        <Header />
        <div className="main">{props.children}</div>
      </div>
      <Outlet />
    </>
  )
}