admin管理员组

文章数量:1024398

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

Share Improve this question Follow edited Jan 4, 2023 at 5:36 Drew Reese 204k1818 gold badges246246 silver badges274274 bronze badges asked Jan 3, 2023 at 12:18 Angel David Sulbaran CalderonAngel David Sulbaran Calderon 4311 silver badge33 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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

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

Share Improve this question Follow edited Jan 4, 2023 at 5:36 Drew Reese 204k1818 gold badges246246 silver badges274274 bronze badges asked Jan 3, 2023 at 12:18 Angel David Sulbaran CalderonAngel David Sulbaran Calderon 4311 silver badge33 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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

本文标签： javascriptReact Router not rendering my children elements inside my layoutStack Overflow