首页 > 其他分享 >React脚手架的搭建方法及配置

React脚手架的搭建方法及配置

时间:2024-06-21 16:01:48浏览次数:19  
标签:react lazy index router React path import 脚手架 搭建

react脚手架:npm create react-app 项目名称

搭建路由:

下载包:npm i react-router-dom

在router文件夹下新建routerConfig.ts文件,文件中配置路由:
import {HashRouter, Routes, Route, Navigate} from 'react-router-dom'
import {lazy} from 'react'

let arr = [
    {
        path: '/',
        to: '/home'
    },
    {
        path: '/home',
        element: lazy(() => import('../views/Home/index'))
    },
    {
        path: '/equipment',
        element: lazy(() => import('../views/Equipment/index'))
    }
]

// 定义组件
const Router = () => {
    return (
        <HashRouter>
            <Routes>
                {
                    arr.map((item, index) => {
                        return (
                            <Route key={index} path={item.path} element={item.element ? <item.element></item.element> : <Navigate to={item.to}></Navigate>}>
                            </Route>
                        )
                    })
                }
            </Routes>
        </HashRouter>
    )
}

// 导出组件
export default Router

标签:react,lazy,index,router,React,path,import,脚手架,搭建
From: https://blog.csdn.net/2401_85868669/article/details/139852644

相关文章

  • React的服务器端渲染(SSR)和客户端渲染(CSR)有什么区别?
    React的服务器端渲染(SSR)和客户端渲染(CSR)是两种不同的页面渲染方式,它们各自有不同的特点和适用场景:服务器端渲染(SSR)页面渲染:页面在服务器上生成,然后将完整的HTML发送给客户端。SEO:由于搜索引擎爬虫可以直接访问到完整的页面内容,因此对搜索引擎优化(SEO)更为友好。首......
  • 描述React Hooks中的useMemo和useCallback的区别和用途。
    ReactHooksAPI中的useMemo和useCallback都是用于优化性能的钩子,但它们的用途和工作方式略有不同:推荐大家看看我过往的文章useMemouseMemo是一个性能优化钩子,它返回一个记忆化的值。useMemo可以避免在组件渲染时进行昂贵的计算或操作,通过记忆化的方式缓存计算结果,仅当依......
  • 2024-06-21 如何在React中使用ECharts
    要安装两个插件echarts和echarts-for-react,前者是一个js图标库,后者是对前者在react的封装,想要在react用echarts,就得装echarts-for-react这类的转换库。yarnaddechartsecharts-for-react例子:importReact,{Component}from"react";importReactEChartsfrom"echarts......
  • 【React篇】父组件渲染时避免重复渲染子组件的3种处理方法
    在React中,父组件渲染时要避免重复渲染子组件,可以使用以下方法:使用React.memo(仅适用于函数式组件)或PureComponent(适用于类组件):这些方法可以帮助你创建在接收到新的props时仅在有必要的情况下重新渲染的组件。它们通过浅比较新旧props来判断是否需要重新渲染。对于......
  • 帮企商城10合一万能DIY分销商城小程序源码系统 带源代码包+搭建部署教程
    系统概述这是一款集多种功能于一体的源码系统,旨在为用户提供一站式的商城解决方案。它不仅支持小程序端,还能与其他平台无缝对接,满足不同用户的需求。代码示例系统特色功能一览   1.万能DIY功能:用户可以根据自己的需求和创意,自由定制商城的外观、布局和功能模块,打造......
  • 超级会员卡积分收银系统源码 带完整的安装代码包以及搭建部署教程
    系统概述超级会员卡积分收银系统源码是一款专为商业运营打造的综合性软件解决方案。它集成了会员卡管理、积分管理、收银管理等多种功能,旨在为企业提供高效、便捷、准确的运营管理工具。该系统源码采用先进的技术架构,具有良好的稳定性和扩展性,能够适应不同规模和类型的企业需......
  • 百度在线分销商城小程序源码系统 分销+会员组+新用户福利 前后端分离 带完整的安装代
    系统概述百度在线分销商城小程序源码系统是一款集分销、会员组管理和新用户福利于一体的前后端分离的系统。它采用先进的技术架构,确保系统的稳定性、高效性和安全性。该系统的前端基于小程序开发,为用户提供了便捷的购物体验和交互界面。用户可以通过小程序轻松浏览商品、下单......
  • 对于react的 <outlet />的理解
    先贴代码layouts文件夹里面有一个文件index.tsx1import{Link,Outlet}from'umi';2importstylesfrom'./index.less';34exportdefaultfunctionLayout(){5return(6<divclassName={styles.navs}>7<ul>8......
  • React+TS前台项目实战(十四)-- 响应式头部导航+切换语言相关组件封装
    文章目录前言Header头部相关组件1.功能分析2.相关组件代码+详细注释3.使用方式4.Gif图效果展示总结前言在这篇博客中,我们将封装一个头部组件,根据不同设备类型来显示不同的导航菜单,会继续使用Reacthooks和styled-components库来构建这个组件,此外,也会实现切换......
  • Redis集群搭建及原理详解
    1.Redis集群方案比较1.1哨兵模式在redis3.0以前的版本要实现集群一般是借助哨兵sentinel工具来监控master节点的状态,如果master节点异常,则会做主从切换,将某一台slave作为master,哨兵的配置略微复杂,并且性能和高可用性等各方面表现一般,特别是在主从切换的瞬间存在访问瞬断......