implement nested routing in React js react-router-dom V6 [duplicate] - reactjs

Question

This question already has an answer here:
Nested routing in react-router-dom V6
(1 answer)
Closed 1 year ago.
I have a folder structure in my project like this :
---login
---main
in the App I implement routing like this that works fine for me :
import { BrowserRouter as Router, Routes, Route} from 'react-router-dom';
<div className="App">
<Router>
<Routes>
<Route path="/" element={<Login />} />
<Route path="/main" element={<Main />} />
</Routes>
</Router>
</div>
but my problem starts here . When I go to the main page, I want to render the nested routing inside of the main page . I code like that but unfortunately nothing work for me fine.
here is the code in my main component .
import {
BrowserRouter as Router,
Routes,
Route,
Outlet,
Link
} from 'react-router-dom';
<
<h1>
hello Home
</h1>
<Link to="/main/child1">
child 1
</Link>||||
<Link to="/main/child2">
child 2
</Link>
<Link to="/">
log out
</Link>
<Outlet />
<Routes>
<Route path="/main/child1" element={<Children1 />} />
<Route path="/main/child2" element={<Children2 />} />
</Routes>
I want to render the child at the under of my main component but nothing happen. and want to url change to "/main/child1" .
I would be really appreciate it if you can explain the detail .
Thanks.
here is the sample code sample is here

Answer 1

You can use the following code:
import React from "react";
import {
BrowserRouter as Router,
Switch,
Route,
Link,
useRouteMatch,
useParams
} from "react-router-dom";
export default function App() {
return (
<Router>
<div>
<ul>
<li>
<Link to="/">Login</Link>
</li>
<li>
<Link to="/main">Main</Link>
</li>
</ul>
<Switch>
<Route path="/">
<Login />
</Route>
<Route path="/main">
<Main />
</Route>
</Switch>
</div>
</Router>
);
}
function Login() {
return <h2>LoginPage</h2>;
}
function Main() {
let match = useRouteMatch();
return (
<div>
<h2>Main Page</h2>
<ul>
<li>
<Link to={`${match.url}/children`}>children</Link>
</li>
<li>
<Link to={`${match.url}/child1`}>
Child_One
</Link>
</li>
</ul>
<Switch>
<Route path={`${match.path}/:childId`}>
<Child />
</Route>
<Route path={match.path}>
<h3>Please select a child.</h3>
</Route>
</Switch>
</div>
);
}
function Child() {
let { childId } = useParams();
return <h3>Requested child ID: {childId}</h3>;
}
The Main page has its own with more routes that build on the /main URL path. You can think of the 2nd here as an "index" page for all children of the main page, or the page that is shown when no child is selected.
For more info, please refer: link