react 项目打包二级目 使用BrowserRouter 解决页面刷新404 找不到路由

使用BrowserRouter

package 配置 (这部分代码可以不做配置也能实现)

复制代码
{
 "homepage": "/admin",
 }

vite.config 配置

复制代码
export default defineConfig({

	base: '/admin'

])

BrowserRouter 添加配置项

复制代码
<BrowserRouter basename='/admin'>
  <App />
</BrowserRouter>

nginx配置

复制代码
server {
  listen       80;
  server_name  www.demo.com;
  root         /var/www;
  index        index.html;
  location /admin{
    try_files $uri /admin/index.html;  # 重点,这里不是配置文件夹名称,而是代理路径名称
  }
}
相关推荐
qq_1249870753几秒前
基于微信小程序的垃圾分类信息系统(源码+论文+部署+安装)
java·前端·spring boot·后端·微信小程序·小程序·计算机毕业设计
琹箐2 分钟前
AntDesign AFormItem中表单元素嵌套及校验
前端·javascript·vue.js
梦6507 分钟前
VUE3简单实现九宫格点击抽奖
前端·javascript·vue.js
郑州光合科技余经理10 分钟前
中台架构实战:同城O2O系统二次开发与部署指南
java·大数据·开发语言·前端·后端·架构·php
人道领域14 分钟前
JavaWeb从入门到进阶(HTML)
前端·html
爱吃山竹的大肚肚20 分钟前
Nginx 最核心和常用的命令
java·运维·服务器·前端·nginx
摘星编程1 小时前
React Native for OpenHarmony 实战:Navigation 导航详解
javascript·react native·react.js
光影少年1 小时前
next.js与纯react区别
前端·javascript·react.js
派大鑫wink1 小时前
【Day31】Web 开发入门:HTTP 协议详解(请求 / 响应、状态码、请求头)
前端·网络协议·http
2501_944711431 小时前
理解 React 自定义 Hook:不只是“封装”,更是思维方式的转变
前端·javascript·react.js