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;  # 重点,这里不是配置文件夹名称,而是代理路径名称
  }
}
相关推荐
全栈前端老曹3 分钟前
【前端路由】Vue Router 动态导入与懒加载 - 使用 () => import(‘...‘) 实现按需加载组件
前端·javascript·vue.js·性能优化·spa·vue-router·懒加载
温宇飞5 分钟前
高效的线性采样高斯模糊
javascript·webgl
POLITE319 分钟前
Leetcode 160.相交链表 JavaScript (Day 9)
javascript·leetcode·链表
Zyx200727 分钟前
构建现代 React 应用:从项目初始化到路由与数据获取
前端
大布布将军32 分钟前
☁️ 自动化交付:CI/CD 流程与云端部署
运维·前端·程序人生·ci/cd·职场和发展·node.js·自动化
LYFlied32 分钟前
Vue.js 中的 XSS 攻击防护机制详解
前端·vue.js·xss
七宝三叔37 分钟前
C#,为什么要用LINQ?
前端
七宝三叔38 分钟前
用「点外卖」的例子讲透HttpClient
前端
再睡一夏就好1 小时前
LInux线程池实战:单例模式设计与多线程安全解析
linux·运维·服务器·开发语言·javascript·c++·ecmascript
Beginner x_u1 小时前
从 Promise 到 async/await:一次把 JavaScript 异步模型讲透
javascript·ajax·promise·异步·async await