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

Question

我有一个安装了 react-router-dom v6 的 create-react-app 项目。尝试使用新的索引路由语法，以便我的主页组件呈现在当前为布局组件提供服务的索引处。当我导航到索引 (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;

首页.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

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