在KnowledgeBase.js中使用路由时出现问题（代码如下）。我尝试将它们写入另一个Route（位于App.js中）的“内部”，但没有任何效果。也许有人可以找到问题所在。
p.s.控制台未给予任何错误
App.js

import React from "react";
import './App.css';
import Header from "./Components/Header/Header";

import Main from "./Components/Main/Main";
import {Route, Routes} from "react-router-dom";
import Home from "./Components/Main/Home/Home";
import Nav from "./Components/Nav/Nav";
import KnowledgeBase from "./Components/Main/KnowlegeBase/KnowledgeBase";
import Messages from "./Components/Main/Messages/Messages";

function App(props) {
  return (
    <div className="App">
      <Header forHeader={props.state}/>
      <Nav forNav={props.state}/>
      <Main forMain={props.state}>
        <Routes>
          <Route path='/home' element={<Home forHome={props.state}/>}/>
          <Route path='social-network/' element={<Home forHome={props.state}/>}/>
          <Route path='/knowledge-base/*' element={<KnowledgeBase forKnowledgeBase={props.state}/>}/>
          <Route path={"/messages"} element={<Messages forMessages={props.state}/>}/>
        </Routes>
      </Main>
    </div>
  );
}

export default App;

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="/knowledge-base/purchase-and-refund" element={<Blocks3/>}/>
                  <Route path="/knowledge-base/popular-questions" element={<Blocks2/>}/>
                  <Route path="/knowledge-base/analytics" element={<Blocks1/>}/>
              </Routes>
          </BaseAll>
      </div>
  )
}

export default KnowledgeBase

BaseAll.js

import React from "react";
import style from './BaseAll.module.css'

const BaseAll = (props) => {
  return (
      <div className={style.baseAll}>
          {props.children}
      </div>
  )
}

export default BaseAll

Menu.js（包含所有导航链接）

import React from "react";
import style from './Menu.module.css'
import {NavLink} from "react-router-dom";

const Menu = (props) => {
  return (
      <div className={style.menu}>
          <header>{props.forMenu.menu.header}</header>

          <form action="">
              <div>
                  <img src={props.forMenu.menu.search_img} alt=""/>
                  <input type="text" placeholder={props.forMenu.menu.input}/>
              </div>
              <button type={"submit"}>{props.forMenu.menu.search_btn}</button>
          </form>

          <nav>
              <NavLink to={"/knowledge-base/analytics"} className={style.menu_NavLink}>{props.forMenu.menu.nav1}</NavLink>
              <NavLink to={"/knowledge-base/popular-questions"} className={style.menu_NavLink}>{props.forMenu.menu.nav2}</NavLink>
              <NavLink to={"/knowledge-base/purchase-and-refund"} className={style.menu_NavLink}>{props.forMenu.menu.nav3}</NavLink>
          </nav>
      </div>
  )
}

export default Menu

我希望在导航NavLink时搜索菜单下会出现相关块。我尝试在App.js和KnowledgeBase.js中实现许多选项，但没有找到一个有效的选项