当前位置: 首页 > 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…...

浅谈 React Hooks

React Hooks 是 React 16.8 引入的一组 API&#xff0c;用于在函数组件中使用 state 和其他 React 特性&#xff08;例如生命周期方法、context 等&#xff09;。Hooks 通过简洁的函数接口&#xff0c;解决了状态与 UI 的高度解耦&#xff0c;通过函数式编程范式实现更灵活 Rea…...

docker详细操作--未完待续

docker介绍 docker官网: Docker&#xff1a;加速容器应用程序开发 harbor官网&#xff1a;Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台&#xff0c;用于将应用程序及其依赖项&#xff08;如库、运行时环…...

Redis相关知识总结(缓存雪崩,缓存穿透,缓存击穿,Redis实现分布式锁,如何保持数据库和缓存一致)

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

MFC内存泄露

1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...

Qwen3-Embedding-0.6B深度解析:多语言语义检索的轻量级利器

第一章 引言&#xff1a;语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域&#xff0c;文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量&#xff0c;支撑着搜索引擎、推荐系统、…...

Cloudflare 从 Nginx 到 Pingora:性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上&#xff0c;所以报错&#xff0c;到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本&#xff0c;cu、torch、cp 的版本一定要对…...

智能分布式爬虫的数据处理流水线优化:基于深度强化学习的数据质量控制

在数字化浪潮席卷全球的今天&#xff0c;数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具&#xff0c;在大规模数据获取中发挥着关键作用。然而&#xff0c;传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时&#xff0c;常出现数据质…...

JAVA后端开发——多租户

数据隔离是多租户系统中的核心概念&#xff0c;确保一个租户&#xff08;在这个系统中可能是一个公司或一个独立的客户&#xff09;的数据对其他租户是不可见的。在 RuoYi 框架&#xff08;您当前项目所使用的基础框架&#xff09;中&#xff0c;这通常是通过在数据表中增加一个…...

处理vxe-table 表尾数据是单独一个接口,表格tableData数据更新后,需要点击两下,表尾才是正确的

修改bug思路&#xff1a; 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑&#xff1a;async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...