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

【问题标题】：Nested index route not rendering in react-router-dom v6嵌套索引路由未在 react-router-dom v6 中呈现
【发布时间】：2021-12-29 18:08:46
【问题描述】：

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

感谢您的帮助！

代码如下：

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

【问题讨论】：

你为什么不在 1 个组件中添加主页和布局？否则我不理解。
谢谢@MohamedSalah。尝试遵循新路由器版本上的文档，这就是他们在文档中设置示例的方式。我喜欢嵌套路由的想法，并想尝试一下。完全遵循文档，但没有呈现 HomePage 组件。 reactrouter.com/docs/en/v6/examples/basic

标签： javascript reactjs react-router-dom

【解决方案1】：

如果你想渲染嵌套的 Route 组件，那么 Layout 组件应该渲染一个 Outlet 以便它们被渲染到。如果Layout 直接包装子组件，则使用 children 属性。

换句话说，就是两者的区别

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

和

<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>
  );
}

【讨论】：