由于BrowserHistory访问的是文件真实地址
不仅需要前端配置package.json
还需要运维端配置一下网站Nginx设置
环境：

"react": "^17.0.2",

"react-dev-utils": "^11.0.4",

"react-dom": "^17.0.2",

"react-router": "^5.2.0",

"react-router-dom": "^5.2.0",

前端package.json配置如下

此外，本地开发你设置"homepage":"./"都能打开，二级地址也可以正常跳转，是webpack dev server里已经做好了配置

Nginx只配置try_files不能完全起作用（次级地址）

需要前端打包的时候配置一下

nginx配置如下

如果你的404页面也是一个单独组件页面的话

在errorpage 404 的页面改为 ../index.html（你的入口html文件）

更多文章请移步我的个人博客，同时我也会加速迁移文章。https://blog.nwctwang.top/

React BrowserHistory 踩坑实录 布置到服务器Nginx上各种静态文件、二级地址404的更多相关文章

  1. 『vue踩坑日常』 在index.html中引入静态文件不生效

    Vue日常踩坑日常 -- 在index.html中引入静态文件不生效问题 本文针对的是Vue小白,不喜勿喷,谢谢 出现该问题的标志如下 控制台warning(Resource interpreted ...

  2. ffmpeg 踩坑实录 添加实时水印（二）

    一.背景介绍 最近领导要求做一个视频录制的相关项目.其中,需要对视频文件进行添加 实时时间水印.于是,我想到了使用之前的ffmpeg来做. 二.ffmpeg实际操作 首先把需要添加水印的视频文件,上传 ...

  3. 后端路由项目由 gulp 改为 webpack 的踩坑实录

    前言 公司有个后端路由的项目是用 gulp 作为前端自动化构建工具,最近学习了一下 webpack,深感其强大,一狠心将其改成了 webpack 构建,以下是踩坑实录. gulp 先来说说原来的架构. ...

  4. JAVA实用案例之文件导出（JasperReport踩坑实录）

    写在最前面 想想来新公司也快五个月了,恍惚一瞬间. 翻了翻博客,因为太忙,也有将近五个多月没认真总结过了. 正好趁着今天老婆出门团建的机会,记录下最近这段时间遇到的大坑-JasperReport. 六 ...

  5. JasperReport报表导出踩坑实录

    写在最前面 翻了翻博客,因为太忙,已经好久没认真总结过了. 正好趁着今天老婆出门团建的机会,记录下最近这段时间遇到的大坑-JasperReport. 六月份的时候写过一篇利用poi文件导入导出的小De ...

  6. React Native之React Navigation踩坑

    自动重装系统之后,已经很长一段时间没有来写React Native了,今天空闲之余,决定重新配置React Native的开发环境,继续踩坑... React Native的开发环境配置狠简单,只要依 ...

  7. react学习 | 踩坑指南

    react样式模块化的"omit -loader"坑 众所周知 react样式的模块化(css modules) 是自己模块中写自己的css,与其他模块互补影响,解决了命名冲突和全 ...

  8. React Native踩坑日记 —— tailwind-rn

    项目背景 在项目的初始阶段,我们需要建立自己的design system,我们spike了一些方案,tailwind-rn就是其中一种,如果有用到或者即将用到tailwind-rn的,可以进来看一看, ...

  9. ffmpeg 踩坑实录 安装与视频切片（一）

    这段时间一直在做一个关于视频处理的项目.其中有一块需要切片相关功能.于是采用了ffmpeg来完成相关需求. 第一,ffmpeg的安装. 首先下载官方包,我这里用的是ffmpeg-release-64b ...

随机推荐

  1. uniapp最简单的上拉加载更多demo

    data() { return { list:[],//数据列表 page: 1,//页数 } }, //请求一下数据(进入页面请求一次) onLoad() { this.getnewsList(th ...

  2. C语言-操作符与表达式

    C语言入门之操作符与表达式 前言 本篇文章主要包括各种操作符的介绍与表达式求值,欢迎各位小伙伴与我一起学习. 一.操作符 分类 算术操作符 移位操作符 位操作符 赋值操作符 单目运算符 关系操作符 逻 ...

  3. 五、JDK的安装与配置

    一.JDK下载与安装 1.1.下载JDK安装包 博主在这里给大家准备了一个64位操作系统的jdk1.8以便大家下载(使用的是迅雷) 点击此处下载 提取码:dfbt 如果其他小伙伴的电脑版本不一样,博主 ...

  4. 三、DOS命令

    常用的DOS命令 #盘符切换 D: #查看当前目录下的所有文件 dir #切换目录 cd+空格+/d+空格+路径 #返回上一级 cd+空格+.. #清理屏幕 cls #退出终端 exit #查看电脑 ...

  5. 基础设施即代码(IAC)，Zalando Postgres Operator 简介

    Postgres Operator 在由 Patroni 提供支持的 Kubernetes (K8s) 上提供易于运行的高可用性 PostgreSQL 集群.它仅通过 Postgres 清单 (CRD ...

  6. Java学习day26

    进程.多任务 1.例如吃饭的时候玩手机,边上厕所边玩手机,看似是同时做多个事情,本质上我们的大脑在同一时间只做了一件事情,这就是多任务 2.道路窄的时候容易造成拥堵,可以拓宽道路,加多车道,同一个方向 ...

  7. python基础练习题（题目 将一个整数分解质因数。例如：输入90,打印出90=2*3*3*5）

    day9 --------------------------------------------------------------- 实例014:分解质因数 题目 将一个整数分解质因数.例如:输入 ...

  8. 技术分享 | Web自动化之Selenium安装

    Web 应用程序的验收测试常常涉及一些手工任务,例如打开一个浏览器,并执行一个测试用例中所描述的操作.但是手工执行的任务容易出现人为的错误,也比较费时间.因此,将这些任务自动化,就可以消除人为因素.S ...

  9. Java 18为什么要指定UTF-8为默认字符集

    在Java 18中,将UTF-8指定为标准Java API的默认字符集.有了这一更改,依赖于默认字符集的API将在所有实现.操作系统.区域设置和配置中保持一致. 做这一更改的主要目标: 当Java程序 ...

  10. 实现Linux系统的回收站

    Linux系统默认没有回收站功能,使用rm命令进行删除操作,文件就会直接从系统中删除,很难恢复. 今天我们利用简单的shell脚本实现Linux系统下的回收站机制. 先提供脚本代码 [root@qll ...