欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

React Router6.x路由表封裝的兩種寫法

 更新時(shí)間：2023年01月31日 09:23:57   作者：Jie_1997  
本文主要介紹了React Router6.x路由表封裝的兩種寫法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

一. 標(biāo)簽形式

src 文件夾下創(chuàng)建一個(gè) routers 文件夾，用于存放路由表

src/routers 文件夾下創(chuàng)建一個(gè) index.js 文件，用于設(shè)置路由表

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 設(shè)置路由模式 */}
  <BrowserRouter>
    {/* fallback 屬性值可以時(shí)組件 */}
    <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 文件中設(shè)置路由鏈接、組件展示位置

import './App.css'
import { Outlet, Link } from "react-router-dom";

function App() {
  return (
    <div className="App">
      {/* 路由鏈接 */}
      <Link to="home">home頁(yè)面</Link>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <Link to="about">about頁(yè)面</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();

二. 對(duì)象形式

src 文件夾下創(chuàng)建一個(gè) routers 文件夾，用于存放路由表

src/routers 文件夾下創(chuàng)建一個(gè) index.js 文件，用于設(shè)置路由表

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 文件中獲取路由組件，設(shè)置組件展示位置

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頁(yè)面</Link>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <Link to="about">about頁(yè)面</Link>
      <br />
      <br />
      {/* 路由組件展示位置，fallback 屬性值可以時(shí)組件 */}
      <Suspense fallback={<div>loading...</div>}>{element}</Suspense>
    </div>
  );
}
export default App;

src/index.js 文件中使用BrowserRouter標(biāo)簽包裹 <App/>標(biāo)簽，設(shè)置路由模式

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 設(shè)置路由模式
  <BrowserRouter>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </BrowserRouter>
);
reportWebVitals();

三. 實(shí)現(xiàn)一個(gè)經(jīng)典的左目錄右內(nèi)容布局結(jié)構(gòu)（使用對(duì)象路由方式）

src 文件夾下創(chuàng)建一個(gè) routers 文件夾，用于存放路由表

src/routers 文件夾下創(chuàng)建一個(gè) index.js 文件，用于設(shè)置路由表

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 屬性對(duì)應(yīng)父路由下的子路由
   */
  {
    path: "/",
    element: <Home />,
    children: [
      // 根路徑時(shí)，使用 Navigate 路由重定向至 page1 頁(yè)面
      {
        path: "",
        element: <Navigate to="/page1" />,
      },
      {
        path: "page1",
        element: <Page1 />,
      },
      {
        path: "page2",
        element: <Page2 />,
      },
      {
        path: "page3",
        element: <Page3 />,
      },
    ],
  },
];
export default routers;

src/App.js 文件中獲取路由組件，設(shè)置組件展示位置

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），以防其組件樹(shù)中的某些子組件尚未具備渲染條件
        fallback 屬性值可以是組件 
      */}
      <Suspense fallback={<div>loading...</div>}>{element}</Suspense>
    </div>
  );
}

export default App;

src/index.js 文件中使用BrowserRouter標(biāo)簽包裹 <App/>標(biāo)簽，設(shè)置路由模式

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 設(shè)置路由模式
  <BrowserRouter>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </BrowserRouter>
);
reportWebVitals();

src/routers/index.js 中對(duì)應(yīng)的組件

在這里插入圖片描述

Home組件：

使用了 ant4 進(jìn)行布局

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();
  // 點(diǎn)擊跳轉(zhuǎn)至對(duì)應(yīng)的路由
  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>;
}

實(shí)現(xiàn)效果：

在這里插入圖片描述

到此這篇關(guān)于React Router6.x路由表封裝的兩種寫法的文章就介紹到這了,更多相關(guān)React Router6.x路由表封裝內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • React類組件中super()和super(props)的區(qū)別詳解

    React類組件中super()和super(props)的區(qū)別詳解

    這篇文章給大家詳細(xì)介紹了React類組件中super()和super(props)有什么區(qū)別,文中通過(guò)代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下
    2024-01-01
  • 30行代碼實(shí)現(xiàn)React雙向綁定hook的示例代碼

    30行代碼實(shí)現(xiàn)React雙向綁定hook的示例代碼

    本文主要介紹了30行代碼實(shí)現(xiàn)React雙向綁定hook的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2022-04-04
  • react 路由Link配置詳解

    react 路由Link配置詳解

    本文主要介紹了react 路由Link配置詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2021-11-11
  • React Hook useState useEffect componentDidMount componentDidUpdate componentWillUnmount問(wèn)題

    React Hook useState useEffect componentD

    這篇文章主要介紹了React Hook useState useEffect componentDidMount componentDidUpdate componentWillUnmount問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • React淺析Fragments使用方法

    React淺析Fragments使用方法

    這篇文章主要介紹了React Fragments使用方法，關(guān)于react Fragments,React中一個(gè)常見(jiàn)模式是為一個(gè)組件返回多個(gè)元素。Fragments 可以讓你聚合一個(gè)子元素列表，并且不在DOM中增加額外節(jié)點(diǎn)
    2022-12-12
  • React中useEffect原理的代碼簡(jiǎn)單實(shí)現(xiàn)詳解

    React中useEffect原理的代碼簡(jiǎn)單實(shí)現(xiàn)詳解

    React的useEffect鉤子是React函數(shù)組件中處理副作用,本文將通過(guò)一個(gè)簡(jiǎn)單的例子解釋如何用代碼實(shí)現(xiàn)useEffect的基本原理,感興趣的小伙伴可以了解下
    2023-12-12
  • react中useEffect函數(shù)的詳細(xì)用法(最新推薦)

    react中useEffect函數(shù)的詳細(xì)用法(最新推薦)

    useEffect是React中的一個(gè)Hook,用于在函數(shù)組件中處理副作用（如數(shù)據(jù)獲取、訂閱、手動(dòng)更改 DOM 等）,useEffect屬于組件的生命周期方法,下面通過(guò)本文給大家分享react中useEffect函數(shù)的詳細(xì)用法,感興趣的朋友跟隨小編一起看看吧
    2024-06-06
  • React Native 集成 ArcGIS 地圖的詳細(xì)過(guò)程

    React Native 集成 ArcGIS 地圖的詳細(xì)過(guò)程

    ArcGIS官方提供了 JavaScript SDK,也提供了 ArcGIS-Runtime-SDK-iOS,但是并沒(méi)有提供 React Native的版本,所以這里使用了 react-native-arcgis-mapview 庫(kù),本文給大家介紹React Native 集成 ArcGIS 地圖的詳細(xì)過(guò)程,感興趣的朋友跟隨小編一起看看吧
    2024-06-06
  • React使用Electron開(kāi)發(fā)桌面端的詳細(xì)流程步驟

    React使用Electron開(kāi)發(fā)桌面端的詳細(xì)流程步驟

    React是一個(gè)流行的JavaScript庫(kù)，用于構(gòu)建Web應(yīng)用程序，結(jié)合Electron框架，可以輕松地將React應(yīng)用程序打包為桌面應(yīng)用程序，本文詳細(xì)介紹了使用React和Electron開(kāi)發(fā)桌面應(yīng)用程序的步驟,需要的朋友可以參考下
    2023-06-06
  • 詳解react使用react-bootstrap當(dāng)輪子造車

    詳解react使用react-bootstrap當(dāng)輪子造車

    本篇文章主要介紹了詳解react使用react-bootstrap當(dāng)輪子造車，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。
    2017-08-08

最新評(píng)論