reactjs React Router未呈现布局内的子元素

8wtpewkr 于 2023-01-04 发布在 React

关注(0)|答案(3)|浏览(136)

app.js

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

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

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

export default App;

版面设计

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

//components
import Navbar from './components/Navbar';

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

export default Layout;

这里是Home页面，我想在布局中显示为子内容。

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

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

export default Home

我想渲染布局里面的子组件。我尝试了一段时间遇到了麻烦，我可以在旧版本的react-router中完成，但是在v6中，事情发生了很大的变化。我尝试做同样的事情，但是没有成功。

reactjs

来源：https://stackoverflow.com/questions/74993259/react-router-not-rendering-my-children-elements-inside-my-layout

3条答案

按热度按时间

xfyts7mz1#

据我所知，当嵌套了Route时使用Outlet。https://reactrouter.com/en/main/components/outlet
您的Layout不是这种情况。请尝试使用children：

import React from 'react';

//components
import Navbar from './components/Navbar';

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

export default Layout;

赞(0）回复(0）举报 2023-01-04

1szpjjfi2#

请使用

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

布局组件内部

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;

赞(0）回复(0）举报 2023-01-04

bmp9r5qi3#

问题

你至少有几个问题：

Layout组件未呈现为Layout Route，因此呈现Outlet没有实际意义，因为它未 Package 子Route组件以将其内容呈现到插座中。
Home组件由Route错误渲染。RRDv6 Route组件API从v5更改，不再有任何component属性。所有渲染属性都被一个element属性替换，该属性采用React.ReactNode（又名JSX）属性值。

溶液

将Layout渲染为布局管线，并正确渲染主管线。

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

赞(0）回复(0）举报 2023-01-04

我来回答

reactjs React Router未呈现布局内的子元素

3条答案

问题

溶液

相关问题

热门标签

最新问答