Rendering component inside Route in React Router Dom

Question

I want to make to render children in father component with React Router Dom v6.2.2, 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>

Hi, did the below answer solved your problem?

Youssouf Oumar
– Youssouf Oumar

2022-09-14 08:04:06 +00:00
Commented Sep 14, 2022 at 8:04 — Youssouf Oumar
– Youssouf Oumar, Commented Sep 14, 2022 at 8:04

Youssouf Oumar · Accepted Answer · 2022-08-29 05:25:47Z

2

You should use element property of Route to render your component since you are using React Router Dom v6, component and render are for anterior versions, or simply wrap it inside Route:

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

edited Aug 29, 2022 at 5:25

answered Mar 17, 2022 at 21:53

Youssouf Oumar

47.5k16 gold badges109 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

desertnaut · Accepted Answer · 2022-08-29 00:09:16Z

1

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 />
    </>
  )
}

edited Aug 29, 2022 at 0:09

desertnaut

60.8k32 gold badges155 silver badges183 bronze badges

answered Aug 22, 2022 at 8:19

Shyam

211 silver badge4 bronze badges

Collectives™ on Stack Overflow

Rendering component inside Route in React Router Dom

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related