IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> React - Router 6.x 路由表封装的两种写法 -> 正文阅读

[JavaScript知识库]React - Router 6.x 路由表封装的两种写法

一. 标签形式

  1. src 文件夹下创建一个 routers 文件夹,用于存放路由表
  2. src/routers 文件夹下创建一个 index.js 文件,用于设置路由表
    import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
    import App from "../App";
    import { lazy, Suspense } from "react";
    // 使用路由懒加载(lazy)
    const Home = lazy(() => import("@/pages/Home"));
    const About = lazy(() => import("@/pages/About"));
    
    const baseRouter = () => (
      {/* BrowserRouter 设置路由模式 */}
      <BrowserRouter>
        {/* fallback 属性值可以时组件 */}
        <Suspense fallback={<div>loading...</div>}>
          <Routes>
            <Route path="/" element={<App />}>
              <Route path="/" element={<Navigate to="/home" />}></Route>
              <Route path="/home" element={<Home />}></Route>
              <Route path="/about" element={<About />}></Route>
            </Route>
          </Routes>
        </Suspense>
      </BrowserRouter>
    );
    export default baseRouter;
    
  3. src/App.js 文件中设置路由链接、组件展示位置
    import './App.css'
    import { Outlet, Link } from "react-router-dom";
    
    function App() {
      return (
        <div className="App">
          {/* 路由链接 */}
          <Link to="home">home页面</Link>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <Link to="about">about页面</Link>
          <br />
          <br />
          {/* 组件占位,在该位置渲染组件 */}
          <Outlet />
        </div>
      );
    }
    export default App;
    
  4. src/index.js 文件中使用路由表,替换之前的 <App/>
    import React from "react";
    import ReactDOM from "react-dom/client";
    import reportWebVitals from "./reportWebVitals";
    import Router from "./routers";
    
    const root = ReactDOM.createRoot(document.getElementById("root"));
    root.render(
      <React.StrictMode>
        {/* 使用路由表 */}
        <Router />
      </React.StrictMode>
    );
    reportWebVitals();
    

二. 对象形式

  1. src 文件夹下创建一个 routers 文件夹,用于存放路由表
  2. src/routers 文件夹下创建一个 index.js 文件,用于设置路由表
    import { Navigate } from "react-router-dom";
    import { lazy } from "react";
    // 使用路由懒加载(lazy)
    const Home = lazy(() => import("@/pages/Home"));
    const About = lazy(() => import("@/pages/About"));
    
    const routers = [
      {
        path: "/",
        element: <Navigate to="/home" />,
      },
      {
        path: "/home",
        element: <Home />,
      },
      {
        path: "/about",
        element: <About />,
      },
    ];
    export default routers;
    
  3. src/App.js 文件中获取路由组件,设置组件展示位置
    import "reset-css";
    import "./App.scss";
    import { useRoutes, Link } from "react-router-dom";
    import routers from "./routers";
    import { Suspense } from "react";
    
    function App() {
      // 使用 useRoutes 获取路由组件
      const element = useRoutes(routers);
      return (
        <div className="App">
          {/* 路由链接 */}
          <Link to="home">home页面</Link>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <Link to="about">about页面</Link>
          <br />
          <br />
          {/* 路由组件展示位置,fallback 属性值可以时组件 */}
          <Suspense fallback={<div>loading...</div>}>{element}</Suspense>
        </div>
      );
    }
    export default App;
    
  4. src/index.js 文件中使用BrowserRouter标签包裹 <App/>标签,设置路由模式
    import React from "react";
    import ReactDOM from "react-dom/client";
    import App from "./App";
    import reportWebVitals from "./reportWebVitals";
    import { BrowserRouter } from "react-router-dom";
    
    const root = ReactDOM.createRoot(document.getElementById("root"));
    root.render(
      // BrowserRouter 设置路由模式
      <BrowserRouter>
        <React.StrictMode>
          <App />
        </React.StrictMode>
      </BrowserRouter>
    );
    reportWebVitals();
    

三. 实现一个经典的左目录右内容布局结构(使用对象路由方式)

  1. src 文件夹下创建一个 routers 文件夹,用于存放路由表

  2. src/routers 文件夹下创建一个 index.js 文件,用于设置路由表

    import { Navigate } from "react-router-dom";
    import { lazy } from "react";
    // 使用路由懒加载(lazy)
    const Home = lazy(() => import("@/pages/Home"));
    const Page1 = lazy(() => import("@/pages/Page1"));
    const Page2 = lazy(() => import("@/pages/Page2"));
    const Page3 = lazy(() => import("@/pages/Page3"));
    
    const routers = [
      /**
       * 父子路由嵌套使用
       * 父路由路径为 '/'
       * children 属性对应父路由下的子路由
       */
      {
        path: "/",
        element: <Home />,
        children: [
          // 根路径时,使用 Navigate 路由重定向至 page1 页面
          {
            path: "",
            element: <Navigate to="/page1" />,
          },
          {
            path: "/page1",
            element: <Page1 />,
          },
          {
            path: "/page2",
            element: <Page2 />,
          },
          {
            path: "/page3",
            element: <Page3 />,
          },
        ],
      },
    ];
    export default routers;
    
  3. src/App.js 文件中获取路由组件,设置组件展示位置

    import "./App.css";
    import { Suspense } from "react";
    import { useRoutes } from "react-router-dom";
    import routers from "./routers";
    function App() {
      // 使用 useRoutes 获取路由组件
      const element = useRoutes(routers);
      return (
        <div className="App">
          {/* 
            路由组件展示位置 {element}
            Suspense:加载指示器(loading indicator),以防其组件树中的某些子组件尚未具备渲染条件
            fallback 属性值可以是组件 
          */}
          <Suspense fallback={<div>loading...</div>}>{element}</Suspense>
        </div>
      );
    }
    
    export default App;
    
  4. src/index.js 文件中使用BrowserRouter标签包裹 <App/>标签,设置路由模式

    import React from "react";
    import ReactDOM from "react-dom/client";
    import App from "./App";
    import reportWebVitals from "./reportWebVitals";
    import { BrowserRouter } from "react-router-dom";
    
    const root = ReactDOM.createRoot(document.getElementById("root"));
    root.render(
      // BrowserRouter 设置路由模式
      <BrowserRouter>
        <React.StrictMode>
          <App />
        </React.StrictMode>
      </BrowserRouter>
    );
    reportWebVitals();
    
  5. src/routers/index.js 中对应的组件
    在这里插入图片描述

    Home组件:

    使用了 ant4 进行布局

    import {
      DesktopOutlined,
      PieChartOutlined,
      UserOutlined,
    } from "@ant-design/icons";
    import { Layout, Menu } from "antd";
    import React, { useState, Suspense } from "react";
    import { Outlet, useNavigate } from "react-router-dom";
    
    const App = () => {
      const { Content, Sider } = Layout;
      function getItem(label, key, icon, children) {
        return {
          key,
          icon,
          children,
          label,
        };
      }
      const items = [
        getItem("目录一", "/page1", <PieChartOutlined />),
        getItem("目录二", "/page2", <DesktopOutlined />),
        getItem("目录三", "/page3", <UserOutlined />),
      ];
      const [collapsed, setCollapsed] = useState(false);
      let navigate = useNavigate();
      // 点击跳转至对应的路由
      const clickMenu = (evt) => {
        navigate(evt.key);
      };
      return (
        <Layout
          style={{
            minHeight: "100vh",
          }}
        >
          <Sider
            collapsible
            collapsed={collapsed}
            onCollapse={(value) => setCollapsed(value)}
          >
            <div className="logo" />
            <Menu
              theme="dark"
              defaultSelectedKeys={["1"]}
              mode="inline"
              items={items}
              onClick={clickMenu}
            />
          </Sider>
          <Layout className="site-layout">
            <Content>
              {/* 子路由的组件占位,在该位置渲染子组件 */}
              <Suspense fallback={<div>loading...</div>}>
                <Outlet />
              </Suspense>
            </Content>
          </Layout>
        </Layout>
      );
    };
    export default App;
    

    Page1组件:

    import React from "react";
    
    export default function Page1() {
      return <div>Page1</div>;
    }
    

    Page2组件:

    import React from "react";
    
    export default function Page2() {
      return <div>Page2</div>;
    }
    

    Page3组件:

    import React from "react";
    
    export default function Page3() {
      return <div>Page3</div>;
    }
    
  6. 实现效果:
    在这里插入图片描述

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-12-25 10:59:18  更:2022-12-25 11:01:23 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年3日历 -2024/3/29 13:20:09-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码