React-Router-v6嵌套路由的两种使用方法

第一种常规路由嵌套方法：

import React from "react";
import { Route, Routes, Link } from "react-router-dom";
import Company from "./About/Company";
import Us from "./About/Us";
function About() {
  return (
    <div>
      <h1>关于</h1>
      <Link to="/about/company">[关于公司]</Link>
      <Link to="/about/us">[关于自己]</Link>
      <hr />
      <Routes>
        <Route path="company" element={<Company />}></Route>
        <Route path="us" element={<Us />}></Route>
      </Routes>
    </div>
  );
}

export default About;
/**
 * 
 * @returns {在app.jsx中的写法}
 */

 <Route path="/about/*" element={<About />}></Route>

第二种使用Outlet进行路由嵌套：

import React from "react";
import { Link, Outlet } from "react-router-dom";
function User() {
  /**
   * @param {Outlet类似于占位符}
   */
  return (
    <div>
      <h1>我的</h1>
      <Link to="/user/orders">[我的订单]</Link>
      <Link to="/user/score">[我的积分]</Link>
      <hr />
      <Outlet />
    </div>
  );
}

export default User;

 /**
 * 
 * @returns {在app.jsx中的写法}
 */ 
      {/* 需要在源标签中把内容放进去，类似于占位符 */}
          <Route
            path="/User/*"
            element={
              <AuthPage>
                <User />
              </AuthPage>
            }
          >
            <Route path="score" element={<Score />}></Route>
            <Route path="orders" element={<Orders />}></Route>
          </Route>

---------------------------------------纯属自己学习知识基础记录！！！！