当前位置: 首页 > news >正文

webpack解决使用window.open方法打开history路由页面提示404的问题

问题:

一般情况下应该使用history.push('/ssh')打开history路由页面

但项目中使用window.open('/ssh'),然后使用new WebSocket进行通信

开发环境下启动项目后,/ssh页面打开却显示cannot get /ssh,控制台提示404

排查问题:

在React开发环境中使用 window.open 打开路由页面时,如果出现404错误,通常是由于以下几个原因导致的:

  • 开发服务器配置问题:默认情况下,webpack-dev-server 只能处理根路径的请求。如果你尝试打开一个路由页面,而该路径没有对应的静态文件,就会返回404错误。
  • HTML5 History API:如果你使用了HTML5 History API(例如 react-router-dom 的 BrowserRouter),浏览器会尝试直接请求该路径,而不是通过React应用的入口点。

1.路由是否有:

App.tsx文件

import React from 'react';
import {Switch, Route} from 'react-router-dom';
import Login from './pages/login';
import WebSSH from './pages/ssh';
import Layout from './layout';const App = () => {return (<Switch><Route path="/" exact component={Login} /><Route path="/ssh" exact component={WebSSH} /><Route component={Layout} /></Switch>)
}export default App;

答案是有

2.使用的是history路由还是hash路由

index.tsx文件

import React from 'react';
import ReactDOM from 'react-dom';
import { Router } from 'react-router-dom';
import { ConfigProvider } from 'antd';
import zhCN from 'antd/es/locale/zh_CN';
import './index.less';
import App from './App';
import moment from 'moment';
import 'moment/locale/zh-cn';
import * as serviceWorker from './serviceWorker';
import { history, updatePermissions } from 'libs';moment.locale('zh-cn');
updatePermissions();ReactDOM.render(<Router history={history}><ConfigProvider locale={zhCN} getPopupContainer={() => document.fullscreenElement || document.body}><App/></ConfigProvider></Router>,document.getElementById('root')
);// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

答案是history路由

解决方案:

1.在devServer对象中设置historyApiFallback: true

webpack开发环境配置示例:

const webpack = require('webpack')
const webpackCommonConf = require('./webpack.common.js')
const { smart } = require('webpack-merge')
const { publicPath } = require('./paths.js')module.exports = smart(webpackCommonConf, {mode: 'development',devtool: 'eval-source-map', // 快速生成源映射,适合开发环境module: {rules: [{test: /\.(png|jpg|jpeg|gif|svg)$/,use: 'file-loader'},{test: /\.module\.css$/,use: ['style-loader',{loader: "css-loader",options: {modules: true,},},// 'postcss-loader'],},{test: /\.css$/,// loader 的执行顺序是:从后往前use: ['style-loader', 'css-loader'],exclude: /\.module\.css$/,},{test: /\.module\.less$/,// 增加 'less-loader' ,注意顺序use: ['style-loader',{loader: "css-loader",options: {modules: true,},},{loader: 'less-loader',options: {javascriptEnabled: true}}],},{test: /\.less$/,// 增加 'less-loader' ,注意顺序use: ['style-loader', 'css-loader', {loader: 'less-loader',options: {javascriptEnabled: true}}],exclude: /\.module\.less$/,},]},plugins: [new webpack.DefinePlugin({// 'development''process.env': {NODE_ENV: JSON.stringify(process.env.NODE_ENV)}})],devServer: {host: '0.0.0.0',port: 8112,hot: true,sockHost: process.env.WDS_SOCKET_HOST, // WebSocket 主机地址sockPort: process.env.WDS_SOCKET_PORT, // WebSocket 端口号// sockHost: '127.0.0.1', // WebSocket 主机地址// sockPort: '9002', // WebSocket 端口号progress: true,  // 显示打包的进度条contentBase: publicPath,  // 根目录open: true,  // 自动打开浏览器compress: true,  // 启动 gzip 压缩historyApiFallback: true, // 是否开发 HTML5 History API 网页profile: true, // 是否捕捉 Webpack 构建的性能信息,用于分析什么原因导致构建性能不佳// 设置代理proxy: {// 将本地 /api/xxx 代理到 localhost:3000/api/xxx'/api': {target: 'http://127.0.0.1:8000',changeOrigin: true,ws: true,headers: {'X-Real-IP': '1.1.1.1'},pathRewrite: {'^/api': ''}},}}
})

2.使用window.location.href='路由路径'代替window.open

缺点:

  • 可能项目中有多处需要修改,比较麻烦
  • 可能业务就是需要window.open的新开一个tab页的效果,所以window.location.href不符合要求

总结:

所以修改webpack开发环境配置比较好,修改地方少,好控制

相关文章:

webpack解决使用window.open方法打开history路由页面提示404的问题

问题: 一般情况下应该使用history.push(/ssh)打开history路由页面 但项目中使用window.open(/ssh),然后使用new WebSocket进行通信 开发环境下启动项目后,/ssh页面打开却显示cannot get /ssh,控制台提示404 排查问题: 在React开发环境中使用 window.open 打开路由页面时&a…...

怎么把视频的声音转化为文字免费?7个小妙招,视频转文字轻松解决!

您是否也曾在做会议记录时&#xff0c;希望能免费把视频的声音转化为文字呢&#xff1f;在如今我们的办公生活中&#xff0c;用视频记录会议、记录的生活似乎已经成为了我们一项必备技能&#xff0c;但也并非所有人都能轻松获取视频中的信息。尤其是有着听力障碍的人群&#xf…...

【无标题】2024年第五届 MathorCup 数学应用挑战赛——大数据竞赛赛题

2024年第五届 MathorCup 数学应用挑战赛——大数据竞赛赛题已发布~&#xff0c;本届初赛时间为&#xff1a;2024年10月25日18:00至2024年11月1日20:00。本次赛题分为A&#xff0c;B两道&#xff0c;所有参赛队从赛道 A、B 中任选一题作答。在报名系统内选择自己队伍的赛道时&am…...

新能源行业必会基础知识---电力现货问答---第9问---什么是输电权?什么是输电权市场?

新能源行业必会基础知识-----电力现货问答-----主目录-----持续更新https://blog.csdn.net/grd_java/article/details/142909208 虽然这本书已经出来有几年了&#xff0c;现货市场已经产生了一定变化&#xff0c;但是原理还是相通的。还是推荐大家买来这本书进行阅读观看&#…...

视频文案素材获取渠道分享

做视频时为文案发愁&#xff1f;别担心&#xff01;今天为大家推荐几个实用的视频文案素材网站&#xff0c;让你灵感爆棚&#xff0c;轻松创作文案。 蛙学网 首先要推荐的是蛙学网。作为专业短视频素材库&#xff0c;不仅有修牛蹄、解压视频等热门素材&#xff0c;还为短视频创…...

尚硅谷-react教程-求和案例-数据共享(下篇)-完成数据共享-笔记

#1024程序员节&#xff5c;征文# public/index.html <!DOCTYPE html> <html><head><meta charset"UTF-8"><title>redux</title></head><body><div id"root"></div></body> </html&…...

VB中如何创建和使用自定义控件

在Visual Basic&#xff08;VB&#xff09;中&#xff0c;创建和使用自定义控件是一个高级功能&#xff0c;它允许开发者根据特定需求创建具有独特行为和外观的控件。以下是在VB中创建和使用自定义控件的一般步骤&#xff1a; 一、创建自定义控件 打开VB开发环境&#xff1a; …...

Java继承的super关键字

在Java中&#xff0c;super关键字用于调用父类的构造方法、访问父类的成员变量和成员方法。 调用父类的构造方法&#xff1a; 在子类的构造方法中&#xff0c;可以使用super关键字来调用父类的构造方法。这可以帮助子类初始化从父类继承的属性。调用父类的构造方法要使用以下语…...

3D点云与2D图像的相互转换:2D图像对应像素的坐标 转为3D空间的对应坐标

2d ----> 3d 对应像素到空间坐标的转换 参考&#xff1a;深度相机&#xff0c;通过2d检测得到目标坐标系的3d检测框_深度图到相机坐标-CSDN博客...

查找算法简记

一、简单查找&#xff08;顺序查找&#xff09; 最基本的查找&#xff0c;相当于遍历&#xff0c;从头到尾一个一个找。 二、二分查找 1、简述 二分查找的输入是一个有序的元素列表。 如果要查找的元素包含在列表中&#xff0c;二分查找返回其位置&#xff1b; 否则返回null。…...

算法竞赛(Python)-状态间的奇妙转移(动态规划)

文章目录 一、初探动态规划1 拼图游戏&#xff08;从搜索到动态规划&#xff09;2 物流仓库——状态的转移 二、状态的巧妙定义1 不同的状态和转移2 流浪猫的家——状态压缩与状态剪枝 三 转移方式的神奇优化1 运输计划——在转移中剪枝2 会议安排——在决策中剪枝 三、经典的动…...

String.format() 用法详解

**String.format()详解示例&#xff1a;**import java.util.Date; /** String.format() 格式化 / public class format { /* 字符串占位符类型%s 字符串类型%c 字符类型%b 布尔类型%d 整数类型&#xff08;十进制&#xff09;%x 整数类型&#xff08;十六进制&#xff09;%o …...

es 常用命令(已亲测)

说明&#xff1a; elastic:1235 账号:密码 _isShare &#xff1a; 字段 1、 根据一个参数查询es curl -XGET -u elastic:1235 http://10.223.73.3:9200/catalog/_search \ -H Content-Type: application/json \ -d {"query":{"match":{"_isShar…...

RabbitMQ 高级特性——事务

文章目录 前言事务配置事务管理器加上Transactional注解 前言 前面我们学习了 RabbitMQ 的延迟队列&#xff0c;通过延迟队列可以实现生产者生产的消息不是立即被消费者消费。那么这篇文章我们将来学习 RabbitMQ 的事务。 事务 RabbitMQ 是基于 AMQP 协议实现的&#xff0c;…...

HCIP-HarmonyOS Application Developer V1.0 笔记(二)

类Web开发范式自定义组件基本用法 自定义组件通过element引入到宿主页面。 Props自定义属性 自定义属性支持类型 String&#xff0c;Number&#xff0c;Boolean&#xff0c;Array&#xff0c;Object。 命名规范&#xff1a; 命名时禁止以on、、on:、grab:等保留关键字为开头…...

初体验鸿蒙 HarmonyOS NEXT开发

上个星期三就下载了鸿蒙 HarmonyOS NEXT&#xff0c;安装好了后测试了一下&#xff0c;感觉界面和功能设计与IntelliJ IDEA很像&#xff0c;对初学者非常友好&#xff0c;所见即所得。不知道什么原因&#xff0c;写了代码后测试起来很慢&#xff0c;简单测试后就没有再动。 今天…...

MySQL---主从复制和读写分离

文章目录 MySQL---主从复制和读写分离主从复制mysql主从复制的作用mysql主从复制的分类mysql主从复制原理mysql主从复制的配置步骤mysql主从复制的同步模式在什么情况下半同步复制会将为异步复制&#xff1f;mysql主从复制不一致问题如何解决&#xff1f;mysql主从复制延迟问题…...

Apache Kyuubi概述——网易数帆(网易杭州研究院)开源

Apache Kyuubi概述 一、Apache Kyuubi 历史 Kyuubi是网易数帆&#xff08;网易杭州研究院&#xff09;旗下易数大数据团队开源的一个企业级数据湖探索平台&#xff0c;建立在Apache Spark之上。&#xff08;Kyuubi依赖Apache Spark提供高性能的数据查询能力&#xff0c;扩展了…...

前端代码注释

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言类注释属性注释函数注释函数参数注释解构 & 函数返回结果 注释Vue Props 注释注释建议注释内容要清晰简洁注释类型避免不必要的注释采用一致的风格版本与更…...

Linux线程安全(二)条件变量实现线程同步

目录 条件变量 条件变量初始化和唤醒 键盘触发条件变量唤醒线程demo 条件变量的等待 条件变量定时等待demo 条线变量实现多线程间的同步 条件变量 条件变量是为了控制多个线程的同步工作而设计的 比如说一个系统中有多个线程的存在但有且仅有一个线程在工作&#xff0c…...

多场景 OkHttpClient 管理器 - Android 网络通信解决方案

下面是一个完整的 Android 实现&#xff0c;展示如何创建和管理多个 OkHttpClient 实例&#xff0c;分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

安宝特方案丨XRSOP人员作业标准化管理平台:AR智慧点检验收套件

在选煤厂、化工厂、钢铁厂等过程生产型企业&#xff0c;其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进&#xff0c;需提前预防假检、错检、漏检&#xff0c;推动智慧生产运维系统数据的流动和现场赋能应用。同时&#xff0c;…...

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

【RockeMQ】第2节|RocketMQ快速实战以及核⼼概念详解(二)

升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点&#xff0c;但无自动故障转移能力&#xff0c;Master宕机后需人工切换&#xff0c;期间消息可能无法读取。Slave仅存储数据&#xff0c;无法主动升级为Master响应请求&#xff…...

自然语言处理——Transformer

自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效&#xff0c;它能挖掘数据中的时序信息以及语义信息&#xff0c;但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN&#xff0c;但是…...

docker 部署发现spring.profiles.active 问题

报错&#xff1a; org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...

在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的?

uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件&#xff0c;用于在原生应用中加载 HTML 页面&#xff1a; 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...

用机器学习破解新能源领域的“弃风”难题

音乐发烧友深有体会&#xff0c;玩音乐的本质就是玩电网。火电声音偏暖&#xff0c;水电偏冷&#xff0c;风电偏空旷。至于太阳能发的电&#xff0c;则略显朦胧和单薄。 不知你是否有感觉&#xff0c;近两年家里的音响声音越来越冷&#xff0c;听起来越来越单薄&#xff1f; —…...

JVM虚拟机:内存结构、垃圾回收、性能优化

1、JVM虚拟机的简介 Java 虚拟机(Java Virtual Machine 简称:JVM)是运行所有 Java 程序的抽象计算机,是 Java 语言的运行环境,实现了 Java 程序的跨平台特性。JVM 屏蔽了与具体操作系统平台相关的信息,使得 Java 程序只需生成在 JVM 上运行的目标代码(字节码),就可以…...

【Go语言基础【13】】函数、闭包、方法

文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数&#xff08;函数作为参数、返回值&#xff09; 三、匿名函数与闭包1. 匿名函数&#xff08;Lambda函…...