React Router v6嵌套路由不渲染问题求助

问题分析 #

出现这个问题主要有两个核心原因：

1. 嵌套路由结构不完整：父路由未指定渲染组件且缺少<Outlet />承载子路由内容
2. 静态资源路径解析错误：Webpack未配置绝对路径，导致嵌套路径下资源加载失败

解决步骤 #

1. 修复嵌套路由结构 #

React Router v6中，嵌套路由的父路由必须提供element属性，且该组件内需要通过<Outlet />来渲染子路由的内容。

步骤1：创建博客布局组件

新建BlogLayout.tsx作为父路由的渲染组件：

import React from "react";
import { Outlet } from "react-router-dom";

const BlogLayout = () => {
  return (
    <div>
      {/* 可添加博客页面公共元素，比如导航栏、侧边栏 */}
      <Outlet /> {/* 子路由内容会渲染在此处 */}
    </div>
  );
};

export default BlogLayout;

步骤2：更新路由配置

修改App.tsx中的路由结构，给父路由blog指定布局组件，并按需添加/blog根路径的默认渲染内容：

import React from "React";
import { BrowserRouter, Routes, Route } from "react-router-dom"

import Main from "./pages/Main.tsx";
import BlogLayout from "./pages/BlogLayout.tsx";
import Blog from "./pages/Blog.tsx";

const App = () => {
    return (
        <BrowserRouter>
            <Routes>
                <Route index element={<Main />} />

                <Route path="blog" element={<BlogLayout />}>
                    {/* 访问/blog时显示的默认内容 */}
                    <Route index element={<div>博客列表页面</div>} />
                    {/* 带参数的嵌套路由 */}
                    <Route path=":id" element={<Blog />} />
                </Route>
            </Routes>
        </BrowserRouter>
    );
};

2. 配置Webpack静态资源路径 #

嵌套路径下页面空白无样式，大概率是静态资源（JS、CSS）以相对路径加载，导致浏览器解析错误（比如请求/blog/1/main.js而非/main.js）。

修改webpack.config.js配置：

module.exports = {
  // ...其他配置项
  output: {
    filename: "[name].js",
    publicPath: "/", // 设置为根绝对路径
  },
  devServer: {
    historyApiFallback: true, // 解决刷新嵌套路由时的404问题
    // ...其他devServer配置
  },
};

同时确保HTML模板中资源引入使用绝对路径：

<!-- index.html -->
<script src="/main.js"></script>
<link rel="stylesheet" href="/styles.css">

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