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路由表封装内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • react-router v4如何使用history控制路由跳转详解

    前言 距离React Router v4 正式发布也已经挺久了,这周把一个React的架子做了升级,之前的路由用的还是v2.7.0版的,所以决定把路由也升级下,正好"尝尝鲜"... 江湖传言,目前官方同时维护 2.x 和 4.x 两个版本.(ヾ(。ꏿ﹏ꏿ)ノ゙咦,此刻相信机智如我的你也会发现,ReactRouter v3 去哪儿了?整丢了??巴拉出锅了???敢不敢给我个完美的解释!?)事实上 3.x 版本相比于 2.x 并没有引入任何新的特性,只是将 2.x 版本中部分废弃 API 的

  • 详解升级react-router 4 踩坑指南

    一.前言 上午把近日用React做的一个新闻项目所依赖的包升级到了最新的版本,其中从react-router(2.8.1)升级到react-router(4.1.2)中出现了很多问题, 故总结一下在升级过程中遇到的问题. 二.react-router,V4版本修改内容 1. 所有组件更改为从react-router-dom导入 之前的所有路由组件均是从react-router中导入,在我之前的项目中,导入相关组件如下: //v2 import {Router,Route,hashHistory}

  • React从react-router路由上做登陆验证控制的方法

    本文介绍了React从react-router路由上做登陆验证控制的方法,分享给大家,具体如下: 验证代码 import React from 'react' import {connect} from 'react-redux'; function requireAuthentication(Component) { // 组件有已登陆的模块 直接返回 (防止从新渲染) if (Component.AuthenticatedComponent) { return Component.Authe

  • React-router4路由监听的实现

    React-router 4 React Router4是一个纯React重写的包,现在的版本中已不需要路由配置,一切皆组件. 问题出发点 最近在一个新的H5项目中使用了react router 4 ("react-router-dom": "^4.2.2"),项目中的一部分页面是需要给app客户端的同学使用,这样H5项目中的title就不能一成不变,需要显示对应页面的title,所以,我们就需要去监听路由变动来更改title. 思路 在react中,例如:在父路由

  • react-router4 嵌套路由的使用方法

    react我自己还在摸索学习中,今天正好学习一下react-router4 嵌套路由的使用方法,顺便留着笔记 先直接贴代码 import React from 'react'; import ReactDOM from 'react-dom'; import { HashRouter as Router, Route, Switch} from 'react-router-dom'; import createBrowserHistory from 'history/createBrowserH

  • React-Router如何进行页面权限管理的方法

    前言 在一个复杂的SAP应用中,我们可能需要根据用户的角色控制用户进行页面的权限,甚至在用户进入系统之前就进行权限的控制.本文就此一权限控制进行讨论.本文假设读者了解React和React-Router的相关使用. 从传统的Router开始 一个传统的路由大概长下边这个样式,这是没有添加任何权限限制的. export default (store) => { const history = syncHistoryWithStore(hashHistory, store); return ( <

  • react-router browserHistory刷新页面404问题解决方法

    使用React开发新项目时,遇见了刷新页面,直接访问二级或三级路由时,访问失败,出现404或资源加载异常的情况,本篇针对此问题进行分析并总结解决方案. 背景 使用webpack-dev-server做本地开发服务器时,正常情况只需要简单使用webpack-dev-server指令启动即可,但是当项目处于以下两种情况时,往往需要有嵌套路由和异步加载路由: 我们使用react-router这种路由库构建单页面应用路由: 使用html-webpack-plugin插件动态将加载js的<script>

  • React-router 4 按需加载的实现方式及原理详解

    React-router 4 介绍了在router4以后,如何去实现按需加载Component,在router4以前,我们是使用getComponent的的方式来实现按需加载的,router4中,getComponent方法已经被移除,下面就介绍一下react-router4是入围和来实现按需加载的. 1.router3的按需加载方式 route3中实现按需加载只需要按照下面代码的方式实现就可以了. const about = (location, cb) => { require.ensure

  • 详解React-Router中Url参数改变页面不刷新的解决办法

    问题 今天在写页面的时候发现一个问题,就是在React Router中使用了Url传参的功能,像这样: export class MainRouter extends React.Component { render() { return ( <BrowserRouter> <Switch> ... <Route exact path={'/channel/:channelId'} component={ChannelPerPage}/> ... </Switch

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

    目录 一. 标签形式 二. 对象形式 三. 实现一个经典的左目录右内容布局结构(使用对象路由方式) 一. 标签形式 src 文件夹下创建一个 routers 文件夹,用于存放路由表 src/routers 文件夹下创建一个 index.js 文件,用于设置路由表 import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom"; import App from "../App"; im

  • JavaScript判断变量是否为undefined的两种写法区别

    工作中我们经常需要判断某个变量/属性是否为undefined.通常有两种写法 复制代码 代码如下: // 方式1 typeof age === 'undefined'; // 方式2 age === undefined 这两种写法有什么区别吗? 应该使用哪一种呢?看看下面的例子 复制代码 代码如下: typeof age === 'undefined'; // true 标识符 age 没有声明过,输出true. 再看另一个例子 复制代码 代码如下: age === undefined; //

  • ASP.NET MVC中URL地址传参的两种写法

    一.url地址传参的第一种写法 1.通过mvc中默认的url地址书写格式:控制器/方法名/参数 2.实例:http://localhost:39270/RequestDemo/Index/88,默认参数名为id所以名称为id. 如果使用其他名称,后台是无法读取的会报错 二.url地址传参的第二种写法 1.使用?加参数名=参数值的写法,如果有多个参数使用&来连接 http://localhost:39270/RequestDemo/Index?id=88&name=%E5%BC%A0%E4%

  • ThinkPHP中Widget扩展的两种写法及调用方法详解

    本文实例讲述了ThinkPHP中Widget扩展的两种写法及调用方法.分享给大家供大家参考,具体如下: Widget扩展一般用于页面组件的扩展,在页面根据需要输出不同的内容,下面介绍一下ThinkPHP中Widget的两种写法及调用 写法一: ArticlWidget.class.php文件: class ArticleWidget extends Widget { /** * * @param array $data * @return type * 调用方法:{:W('ArticleList

  • 微信小程序 接入腾讯地图的两种写法

    最近在写微信小程序,遇到了一些坑,在网上也查了好多,感觉都没有我想要的答案, 刚处理了这个地图的问题,在这里总结下,希望可以帮助大家. 在微信小程序中,腾讯地图的接入其实是有两种方式的,第一种调用腾讯本身的地图,第二种是使用插件 ma-route 一.调用腾讯本身的地图 实现结果如下图: 这个非常简单,而且用的人也很多, 只需要调用两个地图的api. 就是上边的两个.当然调用openLocation的时候你首先要调用getLocation授权 需要你在app.json里配置信息,如下: 在你需要

  • C++深浅拷贝和string类的两种写法详解

    目录 一.深浅拷贝 二.string类的两种写法 1.传统写法 2.现代写法 总结 一.深浅拷贝 拷贝这个词对于我们来说应该不陌生,比如我们平常的复制和粘贴就是拷贝:但是如果把拷贝这个词放到C++中来说就有一些复杂了,我们先来看一下什么是浅拷贝: 下面用字符串类来模拟实现. class Astring { public: //构造函数 Astring(const char* str = "") { _str = new char[strlen(str) + 1]; strcpy(_st

  • 详解Python单元测试的两种写法

    目录 一.前言 二.实现 1.doctest 2.unittest 一.前言 python的两个单元测试包分别是 doctest 和 unittest,这两个包的使用起来各有长处,适用于不同的场景 doctest:直接写在方法体中,利用了 python 动态语言的特性,书写方式简单明了,前提是项目不要太大,如果项目复杂代码量大,再加上写在方法体中的单元测试,整体就会看起来有些臃肿,因此 doctest 适用于代码量不大的普通项目 unittest:一般写在独立文件中,与 spring 的单元测试

  • python操作日志的封装方法(两种方法)

    前言 曾经转载过一篇关于python日志模块logging的详解 https://www.cnblogs.com/linuxchao/p/linuxchao-log.html, 虽然这篇文章是别人写的, 但是我就是靠着这篇文章入门的logging,所以我觉得没必要再继续说些理论的东西,今天就简单的对日志做个封装,实际工作中直接拿去用吧 方法1 """ ------------------------------------ @Time : 2019/5/22 8:12 @Au

  • react中使用forEach或map两种方式遍历数组

    目录 使用forEach或map两种方式遍历数组 forEach map 循环遍历数组时map和forEach的区别 forEach情况 map 情况 使用forEach或map两种方式遍历数组 之前写代码,从后台提取数据并渲染到前台,由于有多组数据,用map遍历会相对方便一点,但是 map不能遍历array数组,只能遍历object对象. 所以如果遇到这样的问题可以采用forEach试一下 forEach import React,{Component} from 'react'; let l

  • JS实现选项卡插件的两种写法(jQuery和class)

    本文实例为大家分享了JS实现选项卡插件的2种写法,供大家参考,具体内容如下 实现插件的几个注意点: (1)定义一个固定的html结构,比如选项卡的标题的标签为为li,每个选项卡的内容的标签为div等等: (2)选中时的样式提前确定: (3)最好先用简单的JS实现选项卡的功能,再改为插件的模式. html结构如下: <style> * { margin: 0; padding: 0; } ul { list-style: none; } #tabBox { box-sizing: border-

随机推荐