由于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. java中final变量的用法

    4.4 final变量    final变量的数值不能在初始化之后进行改变(你希望a=3,有很多用到a的场合, 你当然不能在程序中就用3来代替a). 比如: final int h = 0; 想像有一 ...

  2. vue引入swiper

    https://github.com/surmon-china/vue-awesome-swiper/blob/master/examples/03-pagination.vue https://su ...

  3. Taro下拉刷新，上拉加载更多

    1.引入插件 import Taro, { Component } from '@tarojs/taro' import { View, Text, ScrollView } from '@taroj ...

  4. 计算机网络 TCP 四次挥手过程和状态变迁

    客户端打算关闭连接,此时会发送一个 TCP 首部 FIN 标志位被置为 1 的报文,也即 FIN 报文,之后客户端进入 FIN_WAIT_1 状态. 服务端收到该报文后,就向客户端发送 ACK 应答报 ...

  5. 面试官：说一说Zookeeper中Leader选举机制

    哈喽!大家好,我是小奇,一位不靠谱的程序员 小奇打算以轻松幽默的对话方式来分享一些技术,如果你觉得通过小奇的文章学到了东西,那就给小奇一个赞吧 文章持续更新 一.前言 今天又是一个阳光明媚的一天,我又 ...

  6. B. Build the Permutation

    题目分析:我们先简单的分析一下这道题是在干什么啊,给我们三个整数n,a,b,问我们能否构造这样的排列使得序列中有a个极大值,b个极小值,能的话就给出任意一种可能的情况,不能的话就输出-1: 其实一开始 ...

  7. TypeScript学习_入门向

    TypeScript学习_入门向 1-TypeScript简介 首先官网祭天 ---> https://www.tslang.cn/ TypeScript 是 JavaScript 的一个超集, ...

  8. 简单的js提示框,仅仅用jq和css就可以

    首先定义一个盒子 1 .pop { 2 position: fixed; 3 top: 20%; 4 left: 50%; 5 transform: translate(-50%); 6 width: ...

  9. 【原创】记一次DouPHP站点的RCE实战之旅

    声明 本次实践是在合法授权情况下进行,数据已经全部脱敏,主要是提供思路交流学习,请勿用于任何非法活动,否则后果自负. 实战记录 信息收集 1,踩点站点 通过fofa 查到目标DouPHP框架该站点(也 ...

  10. python基础练习题（题目 一个数如果恰好等于它的因子之和，这个数就称为"完数"。例如6=1＋2＋3.编程找出1000以内的所有完数）

    day12 --------------------------------------------------------------- 实例019:完数 题目 一个数如果恰好等于它的因子之和,这个 ...