React嵌套路由失效：KnowledgeBase组件路由无法渲染子组件

你遇到的问题核心是子路由路径写法错误，导致路由匹配失败，所以Blocks组件无法渲染。

问题原因 #

App.js中父路由配置的是/knowledge-base/*，这里的*表示匹配该路径下的所有子路径，但在KnowledgeBase.js的子路由里，你用了绝对路径（比如/knowledge-base/analytics），这会让路由尝试匹配/knowledge-base/knowledge-base/analytics这种不存在的路径，自然无法渲染对应组件。

修复方案 #

把KnowledgeBase.js中的子路由改成相对路径，去掉前面的/knowledge-base/，直接写子路径部分：

修改后的KnowledgeBase.js代码：

import React from "react";
import style from './KnowledgeBase.module.css';
import Menu from "./Menu/Menu";
import Blocks3 from "./Blocks3/Blocks3";
import {Route, Routes} from "react-router-dom";
import BaseAll from "./BaseAll/BaseAll";
import Blocks2 from "./Blocks2/Blocks2";
import Blocks1 from "./Blocks1/Blocks1";

const KnowledgeBase = (props) => {
  return (
      <div className={style.knowledgeBase}>
          <Menu forMenu={props.forKnowledgeBase}/>
          <BaseAll forBaseAll={props.forKnowledgeBase}>
              <Routes>
                  {/* 改为相对路径 */}
                  <Route path="purchase-and-refund" element={<Blocks3/>}/>
                  <Route path="popular-questions" element={<Blocks2/>}/>
                  <Route path="analytics" element={<Blocks1/>}/>
              </Routes>
          </BaseAll>
      </div>
  )
}

export default KnowledgeBase

补充说明 #

Menu.js中的NavLink路径是正确的，因为它们是基于根路径的绝对路径，点击后会触发/knowledge-base/xxx的路由，此时父路由/knowledge-base/*匹配成功，子路由用相对路径就能正确匹配对应的子路径，从而渲染Blocks组件。

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