React多组件嵌套路由问题：单文件多组件如何在Home路由下渲染

你遇到的问题核心是Home组件内部没有正确渲染你定义的blog、about、contact组件，或者没有正确导出Home组件。下面分两种常见场景给出代码示例：

场景1：在Home路由下同时渲染三个组件 #

如果希望访问/（或/home）时直接显示三个组件的内容，需要让Home组件作为容器，把这三个组件作为子元素渲染：

Home.js 代码 #

import React, { Component } from 'react';

// 定义内部组件
class Blog extends Component {
  render() {
    return <div>Blog 内容区域</div>;
  }
}

class About extends Component {
  render() {
    return <div>About 内容区域</div>;
  }
}

class Contact extends Component {
  render() {
    return <div>Contact 内容区域</div>;
  }
}

// 关键：Home组件要包含内部三个组件的渲染逻辑
class Home extends Component {
  render() {
    return (
      <div className="home-wrapper">
        <Blog />
        <About />
        <Contact />
      </div>
    );
  }
}

// 导出Home组件供路由使用
export default Home;

App.js 路由配置 #

此时用<Home />是完全正确的，示例如下（以React Router v6为例）：

import { Routes, Route } from 'react-router-dom';
import Home from './Home';

function App() {
  return (
    <Routes>
      {/* 把Home路由绑定到根路径或/home路径 */}
      <Route path="/" element={<Home />} />
    </Routes>
  );
}

export default App;

场景2：在Home路由下通过子路由分别访问三个组件 #

如果希望通过/home/blog、/home/about、/home/contact分别访问对应组件，需要配置嵌套路由：

Home.js 代码 #

修改Home组件作为路由容器，添加<Outlet />用于渲染子路由内容：

import React, { Component } from 'react';
import { Outlet } from 'react-router-dom';

class Blog extends Component {
  render() {
    return <div>Blog 详情页</div>;
  }
}

class About extends Component {
  render() {
    return <div>About 详情页</div>;
  }
}

class Contact extends Component {
  render() {
    return <div>Contact 详情页</div>;
  }
}

class Home extends Component {
  render() {
    return (
      <div className="home-container">
        {/* 可添加导航栏，方便切换子路由 */}
        <nav>
          <a href="/home/blog">博客</a>
          <a href="/home/about">关于我们</a>
          <a href="/home/contact">联系我们</a>
        </nav>
        {/* 子路由的内容会渲染在Outlet位置 */}
        <Outlet />
      </div>
    );
  }
}

// 导出Home和内部组件
export default Home;
export { Blog, About, Contact };

App.js 嵌套路由配置 #

import { Routes, Route } from 'react-router-dom';
import Home, { Blog, About, Contact } from './Home';

function App() {
  return (
    <Routes>
      <Route path="/home" element={<Home />}>
        {/* 访问/home时的默认内容 */}
        <Route index element={<div>欢迎来到首页</div>} />
        {/* 子路由绑定对应组件 */}
        <Route path="blog" element={<Blog />} />
        <Route path="about" element={<About />} />
        <Route path="contact" element={<Contact />} />
      </Route>
    </Routes>
  );
}

export default App;

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