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

E_w

已于 2023-09-20 15:49:34 修改

阅读量1k

点赞数

文章标签： react.js javascript 前端

于 2023-09-20 15:35:22 首次发布

本文链接：https://blog.csdn.net/qq_66879230/article/details/133082753

版权

本文介绍了两种在React应用中使用`react-router-dom`实现路由嵌套的方法，分别是通过`<Routes>`和`Outlet`组件。作者分享了使用`<Route>`元素和动态路径通配符`/about/*`以及使用`Outlet`作为占位符进行内容加载的实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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>

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