嵌套索引路由未在react-router-dom v6中呈现

我有一个安装了react-router-dom v6 的create-react-app 项目。尝试使用新的索引路由语法，以便我的 HomePage 组件在当前为布局组件提供服务的索引处呈现。当我导航到索引（http://localhost:3000/）时，它会在布局组件中呈现带有站点名称的布局组件，但不会在主页组件中呈现（“主页”不会呈现）。

谢谢您的帮助！

代码如下：

App.js

import './App.css';
import {Routes, Route, Outlet, Link, BrowserRouter as Router} from "react-router-dom";

import Layout from "./components/layout/Layout";
import HomePage from "./pages/Home";

function App() {

  return (
    <div className="App">
        <Router>
            <Routes>
                <Route path="/" element={<Layout />}>
                    <Route index element={<HomePage />} />
                </Route>
            </Routes>
        </Router>
        <Outlet />
    </div>
  );
}

export default App;

Home.js

const HomePage = () => {
    return (
        <div>
            <h1>Home Page</h1>
        </div>
    )
}

export default HomePage

布局.js

import data from "../../config/siteconfig.json"

const settings = data.settings;

const Layout = ({children}) => {
    return (
        <div>
            <h1>{settings.sitename}</h1>
            {children}
        </div>
    )
}

export default Layout

如果你想要嵌套Route然后渲染的组件Layout组件应该渲染一个Outlet让它们被渲染成。使用children道具将是如果Layout was directly包装子组件。

换句话说，这是之间的区别

<Route
  path="/"
  element={(
    <Layout>
      <HomePage /> // <-- rendered as children
    </Layout>
  )}
/>

and

<Route path="/" element={<Layout />}>
  <Route index element={<HomePage />} /> // <-- rendered as nested route
</Route>

建议的代码更新：

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

const Layout = ({children}) => {
  return (
    <div>
      <h1>{settings.sitename}</h1>
      <Outlet />
    </div>
  );
};

...

function App() {
  return (
    <div className="App">
      <Router>
        <Routes>
          <Route path="/" element={<Layout />}>
            <Route index element={<HomePage />} />
          </Route>
        </Routes>
      </Router>
    </div>
  );
}