在 React js react-router-dom V6 中實現嵌套路由

賽義德-阿米爾-梅里齊

我的項目中有一個文件夾結構，如下所示：

- -登錄

- -主要的

在應用程序中，我實現了這樣的路由，這對我來說很好用：

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>

但我的問題從這裡開始。當我轉到主頁時，我想在主頁內呈現嵌套路由。我這樣編碼，但不幸的是沒有什麼對我有用。

這是我的主要組件中的代碼。

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>

我想在我的主要組件下方渲染孩子，但沒有任何反應。並希望將 url 更改為 "/main/child1" 。

如果您能詳細解釋一下，我將不勝感激。

謝謝。

這裡是示例代碼示例在這裡

莫希特·馬羅利亞 B17CS036

您可以使用以下代碼：

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>;
     }