React Router没有在我的布局中呈现我的孩子元素

Question

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中，情况发生了很大变化。我也在试着做同样的事情，但没有成功。

Answer 1

据我所知，在嵌套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;

Answer 2

请使用

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;

Answer 3

问题

你至少有几个问题：

1. Layout组件没有渲染为Layout Route，因此它渲染Outlet是没有意义的，因为它没有包装子Route组件以将其内容渲染到出口中
2. Home组件被Route错误地渲染。RRDv6Route组件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>
);
}