Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >react 直接打开路由页面或者刷新页面404 问题解决

react 直接打开路由页面或者刷新页面404 问题解决

作者头像
wo.
发布于 2021-06-15 03:39:29
发布于 2021-06-15 03:39:29
2.3K00
代码可运行
举报
文章被收录于专栏:了不得的专栏了不得的专栏
运行总次数:0
代码可运行

loc项目前端使用了react 以及react-router, 通过点击跳转到相应的路由页面没有问题, 但跳转后刷新页面,或者输入路由网址直接打开页面 ,就会出现404错误 网上查了下资料可以修改nginx解决

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
#如果使用的是nginx服务器,则只需要使用try_files 指令:

server {
  ...
  location / {
    try_files $uri /index.html
  }
} 

顺便说一下,现在用的是宝塔,安装了免费的nginx防护插件。 结果修改完nginx配置之后报错, "nginx: configuration file /www/server/nginx/conf/nginx.conf test failed" 这样

卸载了插件,就可以修改成功。 不明白为什么这样,只能先卸载再安装了ovo

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

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

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

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
vite + vue3 部署 Nginx 刷新页面 404
只需要添加 try_files uri uri/ /index.html; 即可。
默存
2023/11/05
1.8K0
vite + vue3 部署 Nginx 刷新页面 404
Nginx部署Vue项目以及解决刷新页面404
1.在项目中的package.json上右键,点击Show npm Scripts
IT大咖说
2020/09/23
6.2K0
Nginx部署Vue项目以及解决刷新页面404
VUE路由设置history模式刷新404处理
vue路由配成history模式,需要设置base,如果不设置base刷新页面会报404错误 const router = new Router({     mode: 'history',     base: '/weegClient/',     routes }) 打包时vue.config.js配置 module.exports = {     // publicPath: '/', // 根路径 /pages/dist/     publicPath: '/weClient',
tianyawhl
2023/01/15
1.8K0
vue-route+webpack部署单页路由项目,访问刷新出现404问题
问题描述: 前端同事使用Vue.js框架,利用vue-route结合webpack编写了一个单页路由项目,运维协助在服务器端配置nginx。部署完成后,访问首页没问题,从首页里打开二级页面没问题,但是
洗尽了浮华
2018/01/23
1.6K0
vue-route+webpack部署单页路由项目,访问刷新出现404问题
Nginx部署Vue项目以及解决刷新页面404问题「建议收藏」
1.在项目中的package.json上右键,点击Show npm Scripts
全栈程序员站长
2022/07/19
6.2K0
Nginx部署Vue项目以及解决刷新页面404问题「建议收藏」
React.js Vue.js 项目部署页面刷新404
使用react,vue等开发的项目因为是前后端分离,所有打包发布到服务器以后,需要放在一个静态服务器中运行
零式的天空
2022/03/24
4.6K0
React 项目部署后,页面404解决
本地运行,URL为真实的URL,BrowserRouter 可以直接访问到真实 URL。 但是项目打包后,当页面刷新或跳转新页面时,客户端浏览器会向服务器请求URL。 服务器会去找build文件夹下的html文件,发现找不到URL指定的路径。 这是因为实际上并没有这样的物理路径,或者没有配置路由请求,所以内容无法显示,而显示404错误。
白墨石
2023/01/05
3.6K0
Umi&React打包部署到非根目录及刷新报错404的问题解决
在开发中可能一个项目包含多个子项目,如前端项目和后台管理的项目放在同一个服务器目录中。
德顺
2021/08/03
5.3K0
nginx设置,如果网页404,就跳转index
如果你希望在使用Nginx时,当用户请求一个不存在的页面(即HTTP 404错误)时,能够自动跳转到​​index.html​​​页面,你可以使用Nginx的​​error_page​​指令来实现这一功能。
JaneYork
2024/05/25
1.8K0
Vue路由history模式踩坑记录:nginx配置解决404问题
vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载。但是如果我们不想hash这种以#号结尾的路径时候的话,我们可以使用路由的history的模式。比如如下网址:使用hash模式的话,那么访问变成 http://localhost:8080/bank/page/count/#/ 这样的访问,如果路由使用 history的话,那么访问的路径变成 如下:http://localhost:8080/bank/page/count 这样的了;
吟风者
2019/07/24
4.8K0
vue-router之hash与history,以及nginx配置
vue-router的路由模式可以通过指定mode属性值控制,可选值:"hash" 、"history"、 "abstract" , 默认:"hash" (浏览器环境) , "abstract" (Node.js 环境)
甜点cc
2023/10/16
2.3K0
vue-router之hash与history,以及nginx配置
面试官:vue项目如何部署?有遇到布署服务器后刷新404问题吗?
前后端分离开发模式下,前后端是独立布署的,前端只需要将最后的构建物上传至目标服务器的web容器指定的静态目录下即可
@超人
2021/02/26
8.4K0
面试官:vue项目如何部署?有遇到布署服务器后刷新404问题吗?
Vue部署服务器,刷新页面 404/502 报错
在vue项目中,部署项目到服务器的时候报404/502的错误 一般可以用hash()和history.pushState() 作为路由跳转,就下面这样滴 如果用下面的这个去 run build 就会报404的错误或者502
〆 千寻、
2020/03/11
2.5K0
vue路由history模式下刷新页面404
vue的路由是由js来控制的,但是,当你刷新浏览器的时候,是向服务器发送请求的一个过程,当访问不到的时候必然会返回404。
神葳
2021/01/22
1.2K0
(4) 静态前端容器化 - 单页面应用(SAP) History API Fallback - 刷新 404
当单页面(SAP)页面使用了路由之后(例如 React-Router), 刷新页面就可能造成 404 问题。 问题主要原因是出在 BrowserRouter, 例如 地址 http://localhost:3000/login
老麦
2025/02/12
1250
(4) 静态前端容器化 - 单页面应用(SAP) History API Fallback - 刷新 404
Vue3项目Build后部署在Nginx上F5刷新页面空白或404
使用Vue3项目Vue-router4开发完毕后项目Build打包部署线上环境后,首页能正常访问菜单内点击切换也没有问题,但当你刷新页面后,则出现 404 Not Found,故在此记录一下解决办法
骤雨重山
2023/08/13
3.5K0
VUE路由去除#问题
最近自己在写一个vue的小型管理系统,在浏览器中看到的路由都是带有#的,很是不好看。为了解决此问题,大家一般都会想到:mode: 'history'。可是在开发阶段没有问题,但是一旦build打包后,访问并刷新浏览器后,页面就会报404的错误,为了解决打包后刷新浏览器报404的问题,如果使用nginx的话,还需要做如下配置。下面贴出完整的解决方案。
用户1174387
2018/10/08
1.8K0
VUE路由去除#问题
WordPress博客网站伪静态设置及固定链接设置教程-解决404问题
搭建好WordPress网站之后我个人建议首先要做的就是设置好固定链接,WordPress的固定链接也就是网站各个页面的链接格式,默认的方式不太符合现代化网站,推荐使用自定义的方案。
Hello-1
2022/08/30
2.9K0
WordPress博客网站伪静态设置及固定链接设置教程-解决404问题
vue项目history模式刷新404问题
vue项目history模式部署到服务器后 ,根路径访问没有问题,但是进入其他功能再刷新页面就会出现404,因为你没在nginx或者apache配置上面加上重定向跳转。 解决办法,只需要加上这段配置:
FGGIT
2024/10/15
1950
Umi&React打包部署项目刷新报404错误的几种解决方法
Umi 打包部署到服务器,刷新页面会报 404 错误,这个问题一般是服务端来处理的,比如 Nginx 代理重定向。
德顺
2021/09/10
6.4K0
推荐阅读
相关推荐
vite + vue3 部署 Nginx 刷新页面 404
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验