前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >React 项目部署后,页面404解决

React 项目部署后,页面404解决

作者头像
白墨石
发布2023-01-05 09:12:27
2.8K0
发布2023-01-05 09:12:27
举报
文章被收录于专栏:生信情报站生信情报站

解决方法一:

Nginx 配置

代码语言:javascript
复制
{
    listen 80 ;
    listen [::]:80 ;

    root /usr/local/react/build;  //项目打包代码地址
   
    location / {
        try_files $uri $uri/ /index.html;  //项目服务访问地址
    }
}

解决方法二:

BrowserRouter 换成 HashRouter

代码语言:javascript
复制
import React from 'react';
import ReactDOM from 'react-dom/client';
import {HashRouter} from 'react-router-dom'
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <HashRouter>
      <App />
    </HashRouter>
);

原因

本地运行,URL为真实的URL,BrowserRouter 可以直接访问到真实 URL。 但是项目打包后,当页面刷新或跳转新页面时,客户端浏览器会向服务器请求URL。 服务器会去找build文件夹下的html文件,发现找不到URL指定的路径。 这是因为实际上并没有这样的物理路径,或者没有配置路由请求,所以内容无法显示,而显示404错误。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023-01-04,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 解决方法一:
  • 解决方法二:
  • 原因
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档