implement nested routing in React js react-router-dom V6

Question

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

Does this answer your question? [React Router v5.0 Nested Routes](https://stackoverflow.com/questions/56711663/react-router-v5-0-nested-routes) — code0x00, Nov 16 '21 at 07:35
Take a look here: https://stackoverflow.com/questions/56711663/react-router-v5-0-nested-routes seems like duplicate — code0x00, Nov 16 '21 at 07:37
no it does not work. If I use all component in one js file like App.js it works fine but whenever I split my component to the other js file it does not work — Seyed-Amir-Mehrizi, Nov 16 '21 at 07:38
Please format your code and add complete code differentiating what is working and what is not.Currently it is hard to understand. — code0x00, Nov 16 '21 at 07:41

score 0 · Accepted Answer · answered Nov 16 '21 at 09:49

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

it works fine here but when I move components to the different files, It does not work — Seyed-Amir-Mehrizi, Nov 16 '21 at 10:57

implement nested routing in React js react-router-dom V6

1 Answers1