React路由封装的实现浅析

2024-08-01 10:51:16

了解SAP和路由的概念

SAP（single page web application）的意思是单页Web应用，正如前言所说，一般来说功能较为复杂都会涉及到页面跳转的功能，而传统的前端页面跳转往往是利用<a/>标签进行跳转，这种方式虽然可以实现功能，但是每次跳转到新的页面都会重新对页面的元素进行加载，这样其实对于用户来说是不太友好的。而单页Web应用则较好的解决了这个问题，因为SAP整个应用都是在一个页面上进行的，每次的页面跳转只涉及到页面中对应组件（模块）的更新操作，这样就在一定程度上让页面不需要加载重复的页面元素。

再说说路由

路由其实可以理解为是一个映射关系，即路径到组件或者函数的对应关系，比如说/home这个路径对应着Home这个首页组件，在React中，有react-router-dom这个官方维护的组件库来帮助我们处理项目中的路由问题，需要注意的是，我们用create-react-dom创建的react项目，默认是没有react-router-dom的，所以需要我们自己再额外下载到项目中。

路由封装流程

封装路由的文件组件，针对一级路由的封装操作，单独路由文件抽离出单独的文件中去
src中新建一个router文件夹，在文件夹新建index.js文件，路由配置文件迁移过去
router文件夹中新建mapRouter文件，路由配置转换成数组对象格式，参考Vue配置
index.js循环Route组件即可，二级路由配置先暂时在父组件中配置即可

注：文件夹的名称和文件的名字可以随便定义，无需完全按照上方流程来

index.js

import { default as React } from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';
import {Routes} from '../src//router/index'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Routes/>
);
reportWebVitals();

router/index.js

//router/index.js文件
import { HashRouter as Router, Route, Switch } from "react-router-dom"
import routes from './mapRoute';
//定义的路由函数直接挂载到主页面上去
const Routes = function () {
    console.log(routes);
    return (
      <Router>
        <Switch>
          {
            routes.map((item,index)=>{
                return (
                    <Route key={index} path={item.path} component={item.component}></Route>
                )
            })
          }
        </Switch>
      </Router>
    )
  }
export default Routes;

HashRouter as Router，这是给HashRouter起的别名，可以不写

router/mapRoute.js路由配置文件

import App from '../App';
import Detail from '../detail';
import Layout from "../admin/layout"
import About from '../pages/About';
const routes = [
    {
        path:"/about",
        title:"About",
        component:About,
    },
    {
        path:"/admin",
        title:"管理后台",
        component:Layout,
        exact:false,
    },{
        path:"/detail/:id",
        title:"detail",
        component:Detail,
    },{
        path:"/",
        title:"App",
        component:App,
    }
]
export default routes;

这样我们react中的路由就封装好了，他的原理是跟我们vue中的路由一样，把路由封装到一个文件中，然后我们就可以直接在这个里面添加路由，不同的是，vue中有一个children属性用来定义二级路由，而react中没有

我们在这个js文件中引入路由，然后在index文件中进行循环渲染，同时也减少了我们的代码量

不过需要注意的是，我们在react路由封装中不能使用二级路由，这是一个弊端，我们可以将二级路由定义在父组件中定义

到此这篇关于React路由封装的实现浅析的文章就介绍到这了,更多相关React路由封装内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

React封装CustomSelect组件思路详解

目录思路和前提编码与实现处理createContext与useContext 对content的封装和拆分: DispatchRender, Controls 先说Controls, 包含控制行: 重置, 确定 DispatchRender 用于根据type分发对应的render子组件,这是一种编程思想,在次可以保证父子很大程度的解耦,再往下子组件不再考虑type是什么,父组件不需要考虑子组件有什么. 单选框的render子组件的具体实现由来: 需要封装一个通过Popover弹出框里可以
基于React封装组件的实现步骤

目录前言 antd 是如何封装组件的 divider 组件源代码如何暴露组件属性如何设置统一类名前缀如何处理样式与类名 divider 组件样式源代码前言很多小伙伴在第一次尝试封装组件时会和我一样碰到许多问题,比如人家的组件会有 color 属性,我们在使用组件时传入组件文档中说明的属性值如 primary ,那么这个组件的字体颜色会变为 primary 对应的颜色,这是如何做到的?还有别人封装的组件类名都有自己独特的前缀,这是如何处理的呢,难道是 css 类名全部加上前缀吗,这也太
epoll封装reactor原理剖析示例详解

目录 reactor是什么? reactor模型三个重要组件与流程分析组件流程将epoll封装成reactor事件驱动封装每一个连接sockfd变成ntyevent 封装epfd和ntyevent变成ntyreactor 封装读.写.接收连接等事件对应的操作变成callback 给每个客户端的ntyevent设置属性将ntyevent加入到epoll中由内核监听将ntyevent从epoll中去除读事件回调函数写事件回调函数接受新连接事件回调函数 reactor运行 react
你知道怎么基于 React 封装一个组件吗

目录 antd 是如何封装组件的仓库地址 divider 组件源代码如何暴露组件属性如何设置统一类名前缀如何处理样式与类名 divider 组件样式源代码总结前言很多小伙伴在第一次尝试封装组件时会和我一样碰到许多问题,比如人家的组件会有 color 属性,我们在使用组件时传入组件文档中说明的属性值如 primary ,那么这个组件的字体颜色会变为 primary 对应的颜色,这是如何做到的?还有别人封装的组件类名都有自己独特的前缀,这是如何处理的呢,难道是 css 类名全部加上前缀
react封装全局弹框的方法

本文实例为大家分享了react封装全局弹框的具体代码,供大家参考,具体内容如下弹框效果图文件布局 index.js /* eslint-disable react/no-render-return-value */ import React, { Component } from 'react' import { is, fromJS } from 'immutable' import ReactDOM from 'react-dom' import './alert.less' const
React路由封装的实现浅析

目录了解SAP和路由的概念再说说路由路由封装流程了解SAP和路由的概念 SAP(single page web application)的意思是单页Web应用,正如前言所说,一般来说功能较为复杂都会涉及到页面跳转的功能,而传统的前端页面跳转往往是利用<a/>标签进行跳转,这种方式虽然可以实现功能,但是每次跳转到新的页面都会重新对页面的元素进行加载,这样其实对于用户来说是不太友好的.而单页Web应用则较好的解决了这个问题,因为SAP整个应用都是在一个页面上进行的,每次的页面跳转只涉及到页
React路由鉴权的实现方法

前言上一篇文章中有同学提到路由鉴权,由于时间关系没有写,本文将针对这一特性对 vue 和 react 做专门说明,希望同学看了以后能够受益匪浅,对你的项目能够有所帮助,本文借鉴了很多大佬的文章篇幅也是比较长的. 背景单独项目中是希望根据登录人来看下这个人是不是有权限进入当前页面.虽然服务端做了进行接口的权限,但是每一个路由加载的时候都要去请求这个接口太浪费了.有时候是通过SESSIONID来校验登陆权限的. 在正式开始 react 路由鉴权之前我们先看一下vue的路由鉴权是如何工作的: 一.
React路由参数传递与嵌套路由的实现详细讲解

目录 1. 页面路由参数传递 1.1 动态路由参数 1.2 search字符串 1.3 页面参数隐式传递 2. 嵌套路由 1. 页面路由参数传递 1.1 动态路由参数描述: 以“/detail/:id”形式传递的数据,在落地组件中通过this.props.match.params得到. 使用: App.jsx: import React, { Component } from 'react' import { Route, Link, NavLink, Switch, Redirect } f
react路由配置方式详解

本文介绍了react路由配置,最近刚开始学,分享给大家,顺便给自己留个笔记. 包含了LInk跳转以及js触发跳转并传参. 这是项目的目录结构,主要的代码都在src目录下,src下面新建一个containers文件夹放我们的一些组件,router文件夹是配置路由用的. 按照顺序来写:detail文件夹下的代码 import React from 'react' class Detail extends React.Component { render() { return ( <p>Detail
详解React路由传参方法汇总记录

React中传参方式有很多,通过路由传参的方式也是必不可少的一种. 本文记录项目中会用到的路由传参方式: 路由跳转传参API + 目标路由获取参数的方式. 一.动态路由跳转方法 Link <Link to={{ pathname: "/user/add/1" }}>跳转新增页面</Link> history.push this.props.history.push("/user/add/1"); 获参方法 this.props.match.
浅谈react路由传参的几种方式

第一种传参方式,动态路由传参通过设置link的path属性,进行路由的传参,当点击link标签的时候,会在上方的url地址中显示传递的整个url <Link to='/home?name=dx'>首页</Link> 如果想真正获取到传递过来的参数,需要在对应的子组件中 this.props.location.search 获取字符串,再手动解析因为传参能够被用户看见,传递获取比较麻烦,所以不推荐第二种传参方式,隐式路由传参 <Link to={{ pathname: '
无废话快速上手React路由开发

安装输入以下命令进行安装: // npm npm install react-router-dom // yarn yarn add react-router-dom react-router相关标签 react-router常用的组件有以下八个: import { BrowserRouter, HashRouter, Route, Redirect, Switch, Link, NavLink, withRouter, } from 'react-router-dom' 简单路由跳转实现一
五分钟教你了解一下react路由知识

目录什么是路由纯组件的基本使用纯组件使用的注意点路由的基本初体验 HashRouter和BrowserRouter Link组件和NavLink组件 Route和Switch组件路由传参什么是路由简单的说就是根据不同的地址,web服务器处理不同的业务以及逻辑. 以下代码全部运行在react脚手架中纯组件的基本使用 // 组件更新机制: // 只要父组件重新渲染了, 所有的组件子树, 也会更新 // 性能优化 // 1. 减轻state // 2. 避免不必要的重新渲染 (性能优化
react路由守卫的实现(路由拦截)

react不同于vue,通过在路由里设置meta元字符实现路由拦截.在使用 Vue ,框架提供了路由守卫功能,用来在进入某个路有前进行一些校验工作,如果校验失败,就跳转到 404 或者登陆页面,比如 Vue 中的 beforeEnter 函数: ... router.beforeEach(async(to, from, next) => { const toPath = to.path; const fromPath = from.path; }) ... react实现路由拦截的基本思路还是利
react 路由Link配置详解

1.Link的to属性 (1)放置路由路径 (2)放置对象,且为规定格式 {pathname:"/xx",search:'?键值对',hash:"#xxx",state:{键值对}} 会自动将pathname.search.hash拼接在url路径上,state为传入的参数可通过输出props查看对象内的信息 this.props.location.state.键名获取state内的数据 2.Link的replace属性添加replace将跳转前的上一个页面替换

React路由封装的实现浅析

目录

了解SAP和路由的概念

再说说路由

路由封装流程

相关推荐

随机推荐