由于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. 一个动态波浪纹Android界面

    IndexActivity.java package com.example.rubikrobot; import androidx.appcompat.app.AppCompatActivity; ...

  2. Android Studio连接SQLite数据库与SQLite Studio实时同步的实现

    最近学习用到了android开发连接数据库这一块,发现连接成功后,都要先访问安卓项目的数据库路径data/data/项目/databases,然后把对应的db文件拷出来,再在SQLite的可视化工具中 ...

  3. Redis分布式实现原理

    一.使用 1.pom.xml导入依赖 <dependency> <groupId>org.springframework.boot</groupId> <ar ...

  4. axios路径变量传到后端没有被解析的问题

    目录就这一个(/-/) 这是一个小小的坑,大家注意一下就好,先上代码 //监听用户状态 async userStateChange(userInfo) { console.log(userInfo); ...

  5. String_StringBuilder_StringBuffer 区别

    1.String: String类是final修饰的,属于不可变(immutable)类,每次对原对象操作都会产生新的String对象. 源码中String类的定义:private final cha ...

  6. 面试官：请分析一条SQL的执行

    最近一直在写<手撕MySQL系列>文章,我发现自己的切入点有一些问题,虽尝试深入探究MySQL中的一些关键特性,但对于MySQL的知识掌握不太能够形成较好的体系化的知识网络.我感到在对全局 ...

  7. [译]ng指令中的compile与link函数解析 转

    通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. 原文地址 angularjs里的指令非常神 ...

  8. Java语言学习day35--8月10日

    今日内容介绍1.集合2.Iterator迭代器3.增强for循环4.泛型 ###01集合使用的回顾 *A:集合使用的回顾 *a.ArrayList集合存储5个int类型元素 public static ...

  9. 微服务状态之python巡查脚本开发

    背景 由于后端微服务架构,于是各种业务被拆分为多个服务,服务之间的调用采用RPC接口,而Nacos作为注册中心,可以监听多个服务的状态,比如某个服务是否down掉了.某个服务的访问地址是否改变.以及流 ...

  10. 最新MATLAB R2020b超详细安装教程（附完整安装文件）

    摘要:本文详细介绍Matlab R2020b的安装步骤,为方便安装这里提供了完整安装文件的百度网盘下载链接供大家使用.从文件下载到证书安装本文都给出了每个步骤的截图,按照图示进行即可轻松完成安装使用. ...