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;  # 重点,这里不是配置文件夹名称,而是代理路径名称
  }
}
相关推荐
小飞悟2 分钟前
组件通信的艺术:从 props 钻井到 context 共享的进化之路
前端·javascript·设计模式
Mintopia3 分钟前
Three.js 中正切函数在相机视野里的那些事儿
前端·javascript·three.js
Dream耀5 分钟前
掌握React useContext:轻量级状态共享与性能优化指南
前端·javascript·react.js
十盒半价6 分钟前
Stylus 伪元素:让 CSS 玩出 “无中生有” 的新花样
前端·css·trae
红衣信6 分钟前
React 中 useContext 的使用与状态共享详解
前端·react.js·面试
断竿散人7 分钟前
JavaScript 事件系统完全指南:从事件流原理到现代化事件处理实战
前端·javascript
梨子同志7 分钟前
Vue 生命周期
前端·vue.js
Point7 分钟前
[ahooks] useEventEmitter源码阅读
前端·javascript·设计模式
梨子同志8 分钟前
Vue 组件通信详解
前端·vue.js
carrieXin8 分钟前
Angular 可复用动态表单组件封装
前端