Rendering components inside 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>
   )