React Router v6中布局内无法渲染子组件的问题求助

你的问题出在路由嵌套的写法不符合React Router v6的规范，以下是具体问题和修正步骤：

问题点分析 #

1. React Router v6 已移除Route组件的component属性，需改用element属性，且必须传入JSX元素（如<Home />）而非组件本身。
2. 布局路由的正确逻辑是将Layout作为父路由的element，子路由嵌套在父路由下，这样子组件才会通过Outlet渲染到布局中。你之前直接把Routes放在Layout标签内部的写法不符合v6的嵌套路由机制。

修正后的代码 #

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>
        <Routes>
          {/* 将Layout作为父路由的element，嵌套子路由 */}
          <Route path="/" element={<Layout />}>
            {/* 子路由的内容会渲染到Layout的Outlet中 */}
            <Route index element={<Home />} />
          </Route>
        </Routes>
      </BrowserRouter>
    </Box>
  );
}

export default App;

Layout.js（无需修改） #

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.js（无需修改） #

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

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

export default Home

关键说明 #

• 父路由path="/"的element是<Layout />，表示访问根路径时先渲染Layout组件。
• 子路由使用index属性，表示当父路由匹配且没有子路径时，渲染该子组件（相当于旧版本的exact效果）。
• 子组件的内容会自动注入到Layout组件的<Outlet />位置。

内容的提问来源于stack exchange，提问作者Angel David Sulbaran Calderon