How to render another component in nested route? - reactjs

Question

I use 6.8.1 react-router-dom and react is 18.0.9.
How I can render the page in nested route condition (for example: render the page, MemberExample1 in MemberDetail, once it is clicked)?
Here is how the logic flow. It works until I click and (expected) render the page.
MemberMgt.tsx ->
opened MemberDetail.tsx (from MemberMgt.tsx) ->
Click MemberNavbar's one of button. (Should render the page based on its link and path ON MemberDetail.tsx.)
src > routers.tsx
const Routers = (): JSX.Element => {
const location = useLocation();
return (
<Routes location={location}>
<Route path="/" element={<Main />} />
<Route path="/designsystem" element={<DesignSystem />} />
<Route path="/modal" element={<ModalPage />} />
<Route path="*" element={<NotFound />} />
<Route path="/servermgt" element={<ServerMgt />} />
<Route path="/membermgt">
<Route path="" element={<MemberMgt />} />
<Route path="detail/:id/*">
{/* MemberDetail is the page I should render button when clicked. */}
<Route path="" element={<MemberDetail />} />
</Route>
</Route>
MemberMgt.tsx
src > pages > MemberMgt
return (
// note: viewList is custom hook. This state refers to the custom hook's state.
{_.map(state.viewList, (item, key) => {
<tr
key={key}
onClick={(e) => {
console.log(item.active);
onChoice(item.id);
navigate(`detail/${String(item.data.idx)}`, { state: item.data });
}}
>
MemberDetail.tsx -
This file act as a middle page to display the other page once the button is clicked.
src > pages > MemberMgt> MemberDetail.tsx
import MemberBrief from './MemberDetailMenu/MemberBrief/MemberBrief';
import MemberExample1 from './MemberDetailMenu/MemberMsMed/MemberExample1';
import MemberExample2 from './MemberDetailMenu/MemberPoint/MemberExample2';
import MemberExample3 from './MemberDetailMenu/MemberWarn/MemberExample3';
import MemberNavbar from './MemberDetailMenu/MemberNavbar';
const MemberDetail = () => {
// this state does not refer to the custom hook!
const { state } = useLocation();
return (
<div className="title-box">
<h5>Main - Detail Page</h5>
</div>
<>
<div className="detail-box-detail">
<div className="detail-global-container-gray">
<div className="memberNavbar">
<MemberNavbar />
</div>
{/* nested Route */}
<Routes>
<Route path="*" element={<MemberBrief />} />
{/* <Route path="/brief" element={<MemberBrief />} /> */}
<Route path="/example1" element={<Example1 />} />
<Route path="/example2" element={<Example2 />} />
<Route path="/example3" element={<Example3 />} />
</Routes>
</div>
</div>
</>
)}
Lastly, this is the button, MemberNavbar.tsx.
src > pages > MemberMgt > MemberDetailMenu > MemberNavbar
const MemberNavbar = () => {
const navigate = useNavigate();
const param = useParams();
const handleClickBrief = () => {
navigate(`/membermgt/detail/${param.id as string}`);
};
const handleClickExample1 = () => {
navigate(`/membermgt/detail/${param.id as string}/example1`);
};
const handleClickExample2 = () => {
navigate(`/membermgt/detail/${param.id as string}/example2`);
};
const handleClickExample3 = () => {
navigate(`/membermgt/detail/${param.id as string}/example3`);
};
return (
<div className="detail-button">
{/* <Button style="filled" size="md" onClick={handleInfoClick}> */}
<Button onClick={handleClickBrief} style="transparent" size="md">
Main - detail page
</Button>
<Button onClick={handleClickExample1} style="transparent" size="md">
Example1
</Button>
<Button onClick={handleClickExample2} style="transparent" size="md">
Example2
</Button>
<Button onClick={handleClickExample3} style="transparent" size="md">
Example3
</Button>
</div>
);
};