最近在做项目的时候遇到了如下错误



并在控制台看到了如下的报错



我先是按照控制台的错误搜索,得出的结果都是对meta头部进行设置,允许资源请求,但是问题依然没有解决,偶然间改变了想法,会不会是路由的问题呢,一搜还真是,这是因为没有历史记录

添加HashRouter即可

import { HashRouter } from 'react-router-dom';

  <HashRouter>
{/*<Route>*/}
<Route exact path="/" component={ App } /> <Route path="/aboutMe" component={aboutMe} />
<Route path="/myBlog" component={myBlog} />
<Route path="/myTrip" component={myTrip} />
<Route path="/aboutWebsite" component={aboutWebsite}/> {/*</Route>*/}
</HashRouter>



最终url会被打上#,问题解决,说是因为打上#后不再会请求服务器资源

问题参考:https://stackoverflow.com/questions/27928372/react-router-urls-dont-work-when-refreshing-or-writing-manually

react-router刷新页面Cannot GET 问题的更多相关文章

  1. React Router v4 页面传值的三种方法

    传值方法 1.props.params 使用React router定义路由时,我们可以给指定一个path,然后指定通配符可以携带参数到指定的path: <Route path='/user/: ...

  2. React+React Router+React-Transition-Group实现页面左右滑动+滚动位置记忆

    2018年12月17日更新: 修复在qq浏览器下执行pop跳转时页面错位问题 本文的代码已封装为npm包发布:react-slide-animation-router 在React Router中,想 ...

  3. react 打包后,项目部署完毕,刷新页面报错(404)

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

  4. React Router 4.x 开发,这些雷区我们都帮你踩过了

    前言 在前端框架层出不穷的今天,React 以其虚拟 DOM .组件化开发思想等特性迅速占据了主流位置,成为前端开发工程师热衷的 Javascript 库.作为 React 体系中的重要组成部分:Re ...

  5. React Router教程

    React Router教程 React项目的可用的路由库是React-Router,当然这也是官方支持的.它也分为: react-router 核心组件 react-router-dom 应用于浏览 ...

  6. React Router API文档

    React Router API文档 一.<BrowserRouter> 使用HTML5历史记录API(pushState,replaceState和popstate事件)的<Rou ...

  7. React Router 用法

    React Router 用法 一.DEMO import React from "react"; import { HashRouter as Router, Route, Li ...

  8. React Router学习

    React Router教程 本教程引用马伦老师的的教程 React项目的可用的路由库是React-Router,当然这也是官方支持的.它也分为: react-router 核心组件 react-ro ...

  9. React:快速上手(6)——掌握React Router

    React:快速上手(6)——掌握React Router 引入Router 安装 npm install react-router-dom 基础组件 React Router中有三种类型的组件:路由 ...

  10. react router路由传参

    今天,我们要讨论的是react router中Link传值的三种表现形式.分别为通过通配符传参.query传参和state传参. ps:进入正题前,先说明一下,以下的所有内容都是在react-rout ...

随机推荐

  1. ZOJ 2112 Dynamic Rankings(树状数组+主席树)

    The Company Dynamic Rankings has developed a new kind of computer that is no longer satisfied with t ...

  2. GlusterFS 存储

    GlusterFS简介: 互联网四大开源分布式文件系统分别是:MooseFS.CEPH.Lustre.GusterFS. GluterFS最早由Gluster公司开发,其目的是开发一个能为客户提供全局 ...

  3. Win32_PhysicalMedia 硬盘 参数说明

    Caption 物理内存还虚拟内存 Description 描述和Caption一样 InstallDate 安装日期(无值) Name 名字 Status 状态 CreationClassName ...

  4. 04Shell流程控制

    流程控制 if 单分支结构 if 条件测试 then 命令序列 fi 双分支结构 if 条件测试 then 命令序列 else 命令序列 fi 多分支结构 if 条件测试 1 then 命令序列 [e ...

  5. 垂直方向margin重叠原因与解决方法

    参考博客:https://blog.csdn.net/weixin_33743661/article/details/88755435

  6. 201871010119-帖佼佼《面向对象程序设计(java)》第八周学习总结

    博文正文开头格式:(2分) 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.co ...

  7. 【玩转SpringBoot】给自动配置来个整体大揭秘

    上一篇文章中提到的条件注解,只是自动配置整体解决方案中的一个环节而已,可以说是管中窥豹. 本文就逐步擦除迷雾,让整体浮现出来,这样就会有一个宏观的认识. 除了写代码之外,还能干点什么? 提到“配置”这 ...

  8. Spring Boot 打成的 jar 和普通的 jar 有什么区别 ?

    Spring Boot 打成的 jar 和普通的 jar 有什么区别 ? Spring Boot 打成的 jar Spring Boot的项目终止以jar包的形式进行打包,这种jar包可以通过可以通过 ...

  9. 关于toString的自动调用

    class a{ } class b extends a{ String rr = "zzz"; public String toString(){ return "aa ...

  10. 在 ASP.NET Core 中使用 FluentValidation 进行验证

    目录 从 NuGet 安装 FluentValidation 争对 Resource类 建立 FluentValidation 在Startup中对写好的验证进行注册 从 NuGet 安装 Fluen ...