由于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. 数据库number（4,3）表示什么

    1 你看 number(4,3)是表示 这个数 一共有4位是有效位,后面的3 表示有3个是小数也就是这个数 只能是1.234,这样格式的 最大只能是9.999,2 number(3,4) 表示这个数 ...

  2. 麒麟系统开发笔记（三）：从Qt源码编译安装之编译安装Qt5.12

    前言   上一篇,是使用Qt提供的安装包安装的,有些场景需要使用到从源码编译的Qt,所以本篇如何在银河麒麟系统V4上编译Qt5.12源码.   银河麒麟V4版本   系统版本:   Qt源码下载    ...

  3. numpy教程01---ndarray的创建

    欢迎关注公众号[Python开发实战], 获取更多内容! 工具-numpy numpy是使用Python进行数据科学的基础库.numpy以一个强大的N维数组对象为中心,它还包含有用的线性代数,傅里叶变 ...

  4. redis 指定db库导入导出数据

    最近根据之前的项目重新改编一个新的项目,发现上一个项目的搭建者,把一些区域权限和划分放在redis上存储,因此不得不照搬过来,所以搜索一下相关如何做的 发现一个比较简单的做法,记录一下操作过程,方便以 ...

  5. VisualStudio安装步骤

    1.下载vs2017,点击安装 2.选择asp.net选项进行安装,如果需要其他的功能,可以选上 3.更改安装路径,尽量把文件安装在c盘以外的盘上,因为c盘是系统盘,安装的东西越多电脑会越卡.注意:不 ...

  6. vue学习day01

    什么是 vue 构建用户界面 用 vue 往 html 页面中填充数据,非常的方便 框架 框架是一套现成的解决方案,程序员只能遵守框架的规范,去编写自己的业务功能! 要学习 vue,就是在学习 vue ...

  7. Blazor 组件库 BootstrapBlazor 中Editor组件介绍

    组件介绍 Editor组件是对Summernote 组件的二次封装. 组件分为div模式和editor模式. 默认状态下editor模式的组件样子如下: 其代码如下: <Editor @bind ...

  8. 数据结构篇(2) ts实现单链表

    interface NodeItem { prev: NodeItem | null next: NodeItem | null data: any } class NodeItem { prev: ...

  9. [AcWing 29] 删除链表中重复的节点

    点击查看代码 /** * Definition for singly-linked list. * struct ListNode { * int val; * ListNode *next; * L ...

  10. QCustomPlot开发笔记（一）：QCustomPlot简介、下载以及基础绘图

    前言   QCustomPlot开发笔记系列整理集合,这是目前使用最为广泛的Qt图表类(Qt的QWidget代码方向只有QtCharts,Qwt,QCustomPlot),使用多年,系统性的整理,过目 ...