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;  # 重点,这里不是配置文件夹名称,而是代理路径名称
  }
}
相关推荐
Cobyte3 小时前
24.Vue Vapor 组件事件 emit 的实现
前端·javascript·vue.js
Flynt3 小时前
TypeScript 5.8 让我少踩了一个大坑,顺手再聊聊 --erasableSyntaxOnly
前端·javascript·typescript
用户2930750976693 小时前
# 从零开始,打造 AI 产品的第一个关键体验——流式输出
前端·vue.js
小杍随笔3 小时前
【 .npmrc 终极配置指南:统一管理 npm/pnpm 缓存与全局目录,告别磁盘混乱】
前端·缓存·npm
默_笙3 小时前
👍 手写一个 MCP 文件读取服务:原来 AI 能"读"我的文件,全靠这个协议
前端·javascript
饮茶三千3 小时前
基于 WangEditor 的富文本编辑器定制实践
前端·vue.js·设计模式
kyle~3 小时前
前端 --- Toast 轻量级弱反馈提示组件
前端
玉宇夕落3 小时前
Vue3 + 流式输出学习
前端
努力成为AK大王3 小时前
CSS 入门完整笔记
前端·css
微笑挖矿3 小时前
大模型流式渲染:为什么"逐字显示"远比你想的复杂
前端