在Electron + Create React应用中,可以按照以下步骤来使用React Router进行路由配置: 安装React Router:在项目目录下运行以下命令来安装React Router。 代码语言:txt 复制 npm install react-router-dom 创建路由组件:在src目录下创建一个名为"routes.js"的文件,用于定义应用的路由规则和
#/src/router.jsimportReactfrom'react';import{HashRouter,Route,Switch}from'react-router-dom';import{IndexPage}from"./page";exportclassMainRouterextendsReact.Component{render(){return(<HashRouter><Switch><Route exact path={'/'}component={IndexPage}/></Switch></HashRouter>);}}...
react-dom 18.2.0react-router-dom 6.16.0antd 5.9.4less 4.2.0sass 1.69.0stylus 0.60.0 ※注: 代码区域每行开头的:"+" 表示新增"-" 表示删除"M" 表示修改 1 Electron核心概念 学习Electron最先要掌握的就是他的主进程与渲染进程概念。网上很多相关教程也进行了详细介绍,又是画关系图又是文字描述的。
本次开发使用了electron-vite-react,具体构建和配置就是用它的默认配置就好了,值得注意的是,本次需要要做三个窗体,一个主窗体,一个截屏窗体,一个是图片展示窗体,于是索性就引入react-router-dom了。 先来安装一下: 1 2 3 4 5 git clone https://github.com/electron-vite/electron-vite-react pnpm add rea...
react环境搭建 安装react相关模块 npm install react react-router react-router-dom react-dom babel安装以及配置 接着安装一下 Babel,它是 JS 编译器,能将 ES6 代码转成 ES5,让我们使用最近的语言特性,而不需要担心兼容性的问题。 npm install @babel/polyfill --save npm install @babel/core @babel/cli ...
这样就可以完美解决啦!注意,在electron下,必须使用react-router-dom下的HashRouter,否则在打包时候的环境下有问题 遇到的坑 使用了异步组件(代码分割) 使用如下进行代码分割 import AsyncComponentfrom"@app/components/asyncComponent"; ... exportclassApp extends React.Component<any, any>{ ...
基于electron-vite的Electron+React工程脚手架。 本项目架构实现了以下功能: 基于Vite 4.x搭建 集成Sass/Scss/Less/Stylus 集成Ant Design 5.x 集成react-router-dom 基于send与on/once实现主进程与渲染进程通信 基于invoke与handle实现主进程与渲染进程通信 ...
一.搭建react+electron项目 1.创建一个react项目 create-react-app my-app cd my-app npm start 看下页面是否打开,是否运行正确。 注意:如果页面没有src文件夹, 第一种:卸载全局安装包: npm uninstall -g create-react-app yarn global remove create-react-app ...
安装react-app-rewired,这是一个自定义配置react项目的工具: yarn add react-app-rewired --dev 修改根目录下的package.json: # /package.json"scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test --env=jsdom", ...
electron-react-admin支持亮色+黑夜主题。 开发技术 开发工具:VScode 框架技术:electron27+vite4+react18+zustand+react-router4 UI组件库:arco-design (字节react轻量级UI组件库) 样式处理:sass^1.69.5 图表组件:bizcharts^4.1.23 MD编辑器组件:@uiw/react-md-editor ...