脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React Router6.x路由表封装

React Router6.x路由表封装的两种写法

 更新时间：2023年01月31日 09:23:57   作者：Jie_1997  
本文主要介绍了React Router6.x路由表封装的两种写法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

一. 标签形式

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

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;

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;

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();

二. 对象形式

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

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;

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;

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();

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

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

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;

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;

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();

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

实现效果：

在这里插入图片描述

到此这篇关于React Router6.x路由表封装的两种写法的文章就介绍到这了,更多相关React Router6.x路由表封装内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • React 在非组件环境切换路由的方法

    React 在非组件环境切换路由的方法

    这篇文章主要介绍了React 在非组件环境切换路由的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2023-10-10
  • nginx配置React静态页面的方法教程

    nginx配置React静态页面的方法教程

    作为一个前端开发时刻想着，怎么把自己写的东西，丢到自己的服务器上面，然后展示给别人看。下面我就简单直白的写下，这篇文章主要给大家介绍了关于nginx配置React静态页面的方法教程,需要的朋友可以参考下。
    2017-11-11
  • React 18中的state概念与使用、注意问题解决

    React 18中的state概念与使用、注意问题解决

    state和props类似，都是一种存储属性的方式，但是不同点在于state只属于当前组件，其他组件无法访问，这篇文章主要介绍了React 18中的state概念与使用、注意问题，需要的朋友可以参考下
    2022-12-12
  • 解读react的onClick自动触发等相关问题

    解读react的onClick自动触发等相关问题

    这篇文章主要介绍了解读react的onClick自动触发等相关问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-02-02
  • React传值 组件传值 之间的关系详解

    React传值 组件传值 之间的关系详解

    这篇文章主要介绍了React传值 组件传值 之间的关系详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-08-08
  • 对react中间件的理解

    对react中间件的理解

    这篇文章主要介绍了对react中间件的理解,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • react中的useContext具体实现

    react中的useContext具体实现

    useContext是React提供的一个钩子函数,用于在函数组件中访问和使用Context,useContext的实现原理涉及React内部的机制,本文给大家介绍react中的useContext具体实现,感兴趣的朋友一起看看吧
    2023-11-11
  • react项目中使用react-dnd实现列表的拖拽排序功能

    react项目中使用react-dnd实现列表的拖拽排序功能

    这篇文章主要介绍了react项目中使用react-dnd实现列表的拖拽排序,本文结合实例代码讲解react-dnd是如何实现，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2023-02-02
  • React懒加载实现原理深入分析

    React懒加载实现原理深入分析

    懒加载意思是不会预加载，而是需要使用某段代码，某个组件或者某张图片时，才加载他们（延迟加载），这篇文章主要介绍了React懒加载实现原理
    2022-11-11
  • React语法中设置TS校验规则的步骤详解

    React语法中设置TS校验规则的步骤详解

    这篇文章主要给大家介绍了React语法中如何设置TS校验规则,文中有详细的代码示例供大家参考,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2023-10-10

最新评论