app.js

import { Box } from '@mui/material';
import { BrowserRouter, Route, Routes } from 'react-router-dom'

// Components
import Home from './ponents/Home';
import Layout from './Layout';

const App = () => {
  return (
    <Box>
      <BrowserRouter>
        <Layout>
          <Routes>
            <Route exact path="/" ponent={Home} />
          </Routes>
        </Layout>
      </BrowserRouter>
    </Box>
  );
}

export default App;

layout

import React from 'react';
import { Outlet } from 'react-router-dom';

//ponents
import Navbar from './ponents/Navbar';

const Layout = () => {
  return (
    <React.Fragment>
      <Navbar />
      <Outlet />
    </React.Fragment>
  );
}

export default Layout;

Here the Home page that I want to show as children content inside the layout.

import React from 'react'
import Movies from './MoviesComponent'

const Home = () => {
  return (
    <>hello</>
  )
}

export default Home

I want to render the child ponents inside the layout. I have had trouble trying for a while, I was able to do it in an older version of react-router but in v6, things changed so much. I am trying to do the same but it doesn't work.

app.js

import { Box } from '@mui/material';
import { BrowserRouter, Route, Routes } from 'react-router-dom'

// Components
import Home from './ponents/Home';
import Layout from './Layout';

const App = () => {
  return (
    <Box>
      <BrowserRouter>
        <Layout>
          <Routes>
            <Route exact path="/" ponent={Home} />
          </Routes>
        </Layout>
      </BrowserRouter>
    </Box>
  );
}

export default App;

layout

import React from 'react';
import { Outlet } from 'react-router-dom';

//ponents
import Navbar from './ponents/Navbar';

const Layout = () => {
  return (
    <React.Fragment>
      <Navbar />
      <Outlet />
    </React.Fragment>
  );
}

export default Layout;

Here the Home page that I want to show as children content inside the layout.

import React from 'react'
import Movies from './MoviesComponent'

const Home = () => {
  return (
    <>hello</>
  )
}

export default Home

I want to render the child ponents inside the layout. I have had trouble trying for a while, I was able to do it in an older version of react-router but in v6, things changed so much. I am trying to do the same but it doesn't work.

• javascript
• reactjs
• react-router
• react-router-dom

3 Answers 3

From what I understand, Outlet is used when you have nested Route. https://reactrouter./en/main/ponents/outlet

That's not the case for your Layout. Try using children:

import React from 'react';

//ponents
import Navbar from './ponents/Navbar';

const Layout = ({ children }) => {
    return (
        <React.Fragment>
            <Navbar/>
            {children}
        </React.Fragment>
    );
}

export default Layout;

please use

       import { createBrowserRouter } from 'react-router-dom';
    
    
        const router=createBrowserRouter([
          {
            path:'/',
            element:<Home/>
          },
          {
            path:'/Test',
            element:<Test payload={payload}/>
          }
        ]);
        
        root.render(
        <Layout router={router}>
     </Layout>
);

And inside Layout Component

import { Fragment } from "react"
import { RouterProvider } from "react-router-dom";

const Layout=({router})=>{
    return(<Fragment>
        <RouterProvider router={router}>
 </RouterProvider>
    </Fragment>)
}

Layout.displayName='Layout';

export default Layout;

Issues

You've at least a couple of issues:

1. The Layout ponent isn't rendered as a Layout Route, so it rendering an Outlet is moot since there it's not wrapping children Route ponent to render their content into the outlet.
2. The Home ponent is incorrectly rendered by the Route. The RRDv6 Route ponent API changed from v5 and there is no longer any ponent prop. All the rendering props were replaced by a single element prop taking a React.ReactNode, a.k.a. JSX, prop value.

Solution

Render Layout as a layout route and correctly render the home route.

const App = () => {
  return (
    <Box>
      <BrowserRouter>
        <Routes>
          <Route element={<Layout />}>
            <Route path="/" element={<Home />} />
          </Route>
        </Routes>
      </BrowserRouter>
    </Box>
  );
}