首页 > 其他分享 >React刷新页面报错(404)

React刷新页面报错(404)

时间:2024-06-05 13:58:25浏览次数:15  
标签:index html React 404 报错 路由 页面

报错原因:

你在浏览器内可以由首页跳转到其他路由地址,是因为这是由前端自行渲染的,你在React Router定义了对应的路由,脚本并没有刷新网页访问后台,是JS动态更改了location。

当刷新时,首先是访问的后台地址,然后返回的页面内加载了React代码,最后在浏览器内执行;也就是说如果这个时候报404,是因为你后台并没有针对这个路由给出返回HTML内容,也谈不上执行React Router了。

对于单页应用来说,大部分请求都找不到实际的文件,这个时候就需要返回 index.html 文件,让 JavaScript 代码根据 URL 渲染对应的页面。

如果你期望所有的路由都由React Router来定义,那么无论任何路径都返回index.html就可以了

解决方案一:

如果要在服务器里修改配置,比如Nginx,配置try_flies指令:它的作用是:按顺序尝试匹配文件或者路径,直到找到一个存在的文件或者路径为止。

例如:try_files $uri $uri/ /index.html;

解决方案二:

服务端路由不同的服务器配置的方式不同,需要我们自己查找配置。

另外一种简单的解决方法,使用HashRouter,不要使用BrowserRouter,这样所有的请求都会定位到index.html这一个页面,服务器端也不需要任何配置了。

标签:index,html,React,404,报错,路由,页面
From: https://www.cnblogs.com/michaelShao/p/18232816

相关文章

  • 一个基于 React + SpringBoot 的在线多功能问卷系统(附源码)
    简介:一个基于React+SpringBoot的在线多功能问卷系统前端技术栈:React、React-Router、Webpack、Antd、Zustand、Echarts、DnDKit后端技术栈:SpringBoot、MySQL、MyBatisPlus、Redis项目源码下载链接: https://pan.quark.cn/s/2e32786e0c61部分页面静态预览: 主要前......
  • Vue3-shallowRef与shallowReactive
    shallowRef作用:创建一个响应式数据,但只对顶层属性进行响应式处理。用法:letmyVar=shallowRef(initialValue);特点:只跟踪引用值的变化,不关心值内部的属性变化。shallowReactive作用:创建一个浅层响应式对象,只会使对象的最顶层属性变成响应式的,对象内部的嵌套属......
  • npm下载依赖报错:operation not permitted
    npm下载依赖报错:operationnotpermitted想下个SoybeanAdmin来用下,需要用到pnpm,但是用npm下载的时候直接报错简单来说就是权限的问题,网上很多都说改nodejs下面的几个文件夹的权限,我的评价是不好使,还得修改nodejs这个文件夹的权限才行,右键属性-安全-编辑-勾上完全控制-确定,这样......
  • `jsonb` 报错 `invalid input syntax for type timestamp with time zone ““
    哈喽,大家好,我是木头左!大家好,我是你们的朋友,公众号博主。今天要聊一聊一个常见的数据库问题:jsonb报错invalidinputsyntaxfortypetimestampwithtimezone:""。这个问题可能会影响到你的开发工作,但是别担心,我会用最简单易懂的方式,帮助你解决这个问题。1.问题解析需要......
  • 服务器安装centos系统报错
    安装centos报错:dracut-initqueue:warning:dracut-initqueuetimeout-startingtimeoutscripts解决方法U盘启动报错信息 查看U盘的对应分区 重启电脑按e进入编辑模式将:vmlinuzinitrd=initrd.imginst.stage2=hd:LABEL=CentOS\x207\x20x86_64rd.live.checkquiet改......
  • ltp模型报错 model no loded
     打印了一下路径。莫名奇妙的路径,在网上找了很久的答案,丢是说这个路径的符号有问题改一下试试吧 后面有查到说的是不能中文路径,我觉得很奇怪,因为我新建了一个test文件来测试,那个文件中的模型路径采用的是当前的文件路径:并且运行成功了但是我在想,他会不会因为我这个项目里面......
  • .netCore System.Drawing.Common 发布,在CentOS 运行报错,生成图片流时。会因为不支持在
    报错:System.PlatformNotSupportedException:System.Drawing.Commonisnotsupportedonnon-Windowsplatforms.Seehttps://aka.ms/systemdrawingnonwindowsformoreinformation. >System.PlatformNotSupportedException:System.Drawing.Commonisnotsupported......
  • 基于ReAct机制的AI Agent
    当前,在各个大厂纷纷卷LLM的情况下,各自都借助自己的LLM推出了自己的AIAgent,比如字节的Coze,百度的千帆等,还有开源的Dify。你是否想知道其中的原理?是否想过自己如何实现一套AIAgent?当然,借助LangChain就可以。1.简述AIAgent何为AIAgent呢?如果拿人来对比的话,半支烟认为AIAgent......
  • 基于React的SSG静态站点渲染方案
    基于React的SSG静态站点渲染方案静态站点生成SSG-StaticSiteGeneration是一种在构建时生成静态HTML等文件资源的方法,其可以完全不需要服务端的运行,通过预先生成静态文件,实现快速的内容加载和高度的安全性。由于其生成的是纯静态资源,便可以利用CDN等方案以更低的成本和更高的......
  • git clone GitHub 仓库报错未授权
    gitcloneGitHub仓库报错未授权grantGithubauthenticationtogitCreated:2024-06-03T20:40+08:00Published:2024-06-03T20:44+08:00Categories:GitGitHub开启双重认证以后,就不能只依靠GitHub的账号密码来gitclonerepo了。这里提供一种方法,安装GithubComman......