如何在React中同时加载Layout与Home路由页面？

你的问题出在路由结构上——现在Layout和Home是同级路由，React Router访问根路径/时只会匹配其中一个，无法同时渲染。要实现Layout作为容器包裹Home的效果，需要把Home设为Layout的嵌套子路由，这样Layout里的<Outlet/>就能自动渲染Home的内容。

修改后的App.js代码： #

import './App.scss';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Layout from './components/Layout';
import Home from './components/Home';

function App() {
  return (
    <Router>
      <Routes>
        {/* 将Home作为Layout的子路由嵌套 */}
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
        </Route>
      </Routes>
    </Router>
  );
}

export default App;

关键说明： #

• 必须用BrowserRouter包裹所有路由组件，这是React Router的基础要求，确保路由功能正常工作。
• 把Home路由嵌套在Layout路由内部后，访问/时会先渲染Layout，同时Layout里的<Outlet/>会自动加载作为子路由的Home，实现两个组件同时加载的效果。
• index属性的作用是：当父路由（/）匹配且没有额外子路径时，渲染对应的子组件（即Home）。

修改后启动服务器访问根路径，就能同时看到Layout的侧边栏和Home的内容了。

内容的提问来源于stack exchange，提问作者shivam singh