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;  # 重点,这里不是配置文件夹名称,而是代理路径名称
  }
}
相关推荐
扫一屋8 小时前
Element Plus 源码级深度定制:不 Fork、不改包,用 Vite 插件实现组件行为运行时改造
前端
BigTopOne9 小时前
KOOM 学习计划
前端
自进化Agent智能体9 小时前
Hermes 技能系统详解——安装、使用与浏览
前端
JieE2129 小时前
前端不等人:用 Mock 接口工程让 React 应用独立起飞
前端·react.js·面试
用户355856959029 小时前
HTTPS到底会不会拖慢网站速度?TLS握手原理与性能优化实战
前端
王林不想说话10 小时前
React + Ant Design 后台项目:63 个业务组件的分层实践
react.js·typescript·ant design
xywww16810 小时前
真实后台页实测:Opus 5 看图写前端的可用边界在哪
linux·服务器·前端·数据库·人工智能·gpt
小小尚@10 小时前
AE脚本-AE Actions v1.1.8 操作动作记录器
开发语言·前端·javascript·jupyter·postman
大家的林语冰11 小时前
👍 超越 ESLint,Oxc 优先采用 TypeScript 7,Rust 和 Go 梦幻联动!
前端·javascript·typescript
不好听61312 小时前
React 记忆化三兄弟:memo、useMemo、useCallback 到底在缓存什么
react.js