Route does not render components - reactjs

Question

There is a problem using routes in KnowledgeBase.js (code below). I'm trying to write them "inside" another Route (which is in App.js), but nothing works. Perhaps someone can find the problem.
p.s. the console does not give any errors
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 (it has all NavLink)
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
I expect the relevant blocks to appear under the search menu when navigating through NavLink. I tried to implement many options in App.js and KnowledgeBase.js but couldn't find one that would work

Answer 1

In KnowledgeBase.js file, remove /knowledge-base from each route.
React router automatically adds the parent route path with each child. You do not have to write the parent path with each child if it's already placed inside with another route i.e. /knowledge-base/*
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>
)
}