解决React路由URL中hash(#)部分的显示 、browserHistory打包后浏览器刷新页面出现404的问题零基础入门_404攻略教程

摘要在React项目中,我们需要采用它的路由库React-Router来进行页面跳转,React会根据路由URL来判断是哪个页面。常见的的URL有两种显示方式,一种是hashHistory的形式,形如:localhost:3000/#/free-lesson的路由,另一种是browserHistory的形式,形如:localhost:3000/person-

解决React路由URL中hash(#)部分的显示 、browserHistory打包后浏览器刷新页面出现404的问题零基础入门

摘要

解决React路由URL中hash(#)部分的显示 、browserHistory打包后浏览器刷新页面出现404的问题零基础入门_404攻略教程

在React项目中,我们需要采用它的路由库React-Router来进行页面跳转,React会根据路由URL来判断是哪个页面。常见的的URL有两种显示方式,一种是hashHistory的形式,形如:localhost:3000/#/free-lesson的路由,另一种是browserHistory的形式,形如:localhost:3000/person-center的真实URL路由。在实际项目中常常用真实的URL的方式,但是该形式存在一个隐藏的问题,就是项目打包后,浏览器页面刷新会出现404,为了解决这个问题,需要对服务器做简单的改动。

 

React路由应用真实URL

一、React路由变更

hash路由形式的URL代码如下:

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { HashRouter as Router } from "react-router-dom";

ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById("root")
);

hash路由会自带 # 号,我们需要去掉 # 号,将hash路由形式替换为browser路由形式,具体代码如下:

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { BrowserRouter as Router } from "react-router-dom";

ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById("root")
);

二、浏览器页面404解决

本地运行npm start后,URL为真实的URL,但是npm run build打包项目,上传项目到服务器后,实际项目页面出现404错误。当页面刷新时,浏览器会向服务器请求我们在服务器设置的默认URL,服务器实际会去找根目录下的build好的html文件,发现找不到,因为实际上我们的服务器并没有这样的物理路径/文件等,或者我们没有配置处理这个路由,所以内容无法显示,只有提示404错误。为了解决页面404的问题,我们只需要在服务器上配置处理URL,由于我使用的是nginx,故接下来就讲述如何去配置nginx。

三、Nginx服务器配置

配置nginx解决页面404错误,只需要访问任何路由地址都访问index.html,这样就可以自动被React-Router处理,并进行无刷新跳转。我们在nginx服务器的location中添加代码行 try_files $uri $uri/ /index.html 即可,部分配合代码如下:

server
{
    listen 80 default_server;
    listen [::]:80 default_server;

    root /usr/local/react/build;  //项目打包代码地址

    # Add index.php to the list if you are using PHP
    index index.html index.htm index.nginx-debian.html;

    server_name example/test;  //项目服务访问地址

    location / {
        try_files $uri $uri/ /index.html; 
    }
}
海计划公众号
(0)
上一篇 2020/03/22 20:49
下一篇 2020/03/22 20:49

您可能感兴趣的内容

  • React事件处理函数必须使用bind(this)的原因使用指南_react小白教程

    学习React的过程中发现调用函数的时候必须使用bind(this),之后直接在class中声明函数即可正常使用,但是为什么呢,博主进行了一番查阅,总结如下。1.JavaScript自身特性说明如果传递一个函数名给一个变量,之后通过函数名()的方式进行调用,在方法内部如果使用this则this的指向会丢失。
    示例代码:首先我们创建test对象并直接调用方法

    2020/04/03
  • Vue响应式开发,深入理解Vue.js响应式原理小白基础_vue基础入门

    引子本人是Java背景,许多年前刚接触JavaScript时有点怪怪的,因为它没有 getters 和 setters。随着时间的推移,我开始喜欢上这个缺失的特性,因为相比Java大量的 getter 和 setter,它让代码更简洁。例如,我们看看下面的Java代码:class Person{String firstName;String lastName

    2020/04/06
  • 程序员客栈基础入门_领先的程序员自由工作平台

    程序员客栈基础入门 官方网址:https://www.proginn.com/ 简介描述:领先的程序员自由工作平台 程序员客栈是领先的程序员自由工作平台,未来互联网企业用人方式。提…

    2020/03/06
  • 编写更好的 JavaScript 条件式和匹配条件的技巧基础知识教程_技巧教程视频

    介绍如果你像我一样乐于见到整洁的代码,那么你会尽可能地减少代码中的条件语句。通常情况下,面向对象编程让我们得以避免条件式,并代之以继承和多态。我认为我们应当尽可能地遵循这些原则。正如我在另一篇文章 JavaScript 整洁代码的最佳实践里提到的,你写的代码不单单是给机器看的,还是给“未来的自己”以及“其他人”看的。从另一方面来说,由于各式各样的原因,可能我

    2020/03/29
  • python实用技巧使用帮助_python指南教程

    1.原地交换两个数字Python 提供了一个直观的在一行代码中赋值与交换(变量值)的方法,请参见下面的示例:In [1]: x,y = 10 ,20 In [2]: print(x,y)
    10 20 In [3]: x, y = y, x In [4]: print(x,y)
    20 10赋值的右侧形成了一个新的元组,左侧立即

    2020/03/22
  • js模块化总结小白知识_模块化零基础入门

    从前端打包的历史谈起在很长的一段前端历史里,是不存在打包这个说法的。那个时候页面基本是纯静态的或者服务端输出的, 没有 AJAX,也没有 jQuery。Google 推出 Gmail 的时候(2004 年),XMLHttpRequest, 也就是我们俗称的 AJAX被拾起的时候,前端开发者开始往页面里插入各种库和插件,我们的 js 文件程指数倍的开始增加了。

    2020/03/30
  • 一个指令为各大vue组件库的table组件加上动态编辑功能入门基础_指令指南攻略

    一个指令为各大vue组件库的table组件加上动态编辑功能入门基础 写在前面 在现代的vue组件库上实现表格编辑其实不难,它们大都提供了作用域插槽,可以在插槽内插入input组件来…

    2020/03/19
  • dowebok使用指南_提供代码、素材、特效、教程、模板等建站服务

    dowebok菜鸟知识 官方网址:http://www.dowebok.com/ 简介描述:提供代码、素材、特效、教程、模板等建站服务 dowebok意为做好网站,为用户提供代码、…

    2020/03/06
  • 互联网上有多少个网站?入门教程_网站使用帮助

    在短短的十来年中,网站数量已从Internet上的9,200万增加到超过10亿。互联网不再仅仅是寻找信息或休闲娱乐的场所,也不只是一种工作工具,互联网就是金钱,是社会的变革。而且它的增长是残酷的,互联网上的零售额每年增加数十亿美元,再加上通过在线查看产品或服务并说服人们去购物而形成的实体商店的销售额!拥有超过十亿个网页和各种Web应用程序,您的潜在客户将如何

    2020/03/21
  • 一份完整的MySQL开发规范,进大厂必看!基础指南_规范入门攻略

    一、数据库命令规范1、所有数据库对象名称必须使用小写字母并用下划线分割2、所有数据库对象名称禁止使用mysql保留关键字(如果表名中包含关键字查询时,需要将其用单引号括起来)3、数据库对象的命名要能做到见名识意,并且最后不要超过32个字符4、临时库表必须以tmp_为前缀并以日期为后缀,备份表必须以bak_为前缀并以日期(时间戳)为后缀5、所有存储相同数据的列

    2020/03/26
  • ripplet.js入门基础一款Material design风格点击波特效js插件

    ripplet.js指南攻略 官方网址:https://luncheon.github.io/ripplet.js/demo/ GitHub:https://github.com/…

    2020/03/06
  • 程序员该怎样和老板谈论升职加薪?小白攻略_职场教程视频

    当你忙于工作时,就很容易陷入满足于现状的心态,接受当前的一切。事实上,没有人会永远是一个程序员。即便是有些工作了二三十年的程序员,随着职业技能的发展,他们也在不同的公司间跳槽。即使是在同一家公司,这些经验丰富的程序员也会在他们的职业生涯中稳步上升。程序员可能是现在为数不多的,在职场上会考核你的专业硬技能的职业之一了。在全球化的当下,这其实是一件好事。尤其是房

    2020/03/23
  • “回调函数”超难面试题!!入门百科_函数使用帮助

    let app = {ary: [],use(fn) {this.ary.push(fn);}};app.use((next) => {console.log(1);next();console.log(2)});app.use((next) => {console.log(3);next();console.log(4)});app.use

    2020/04/03
  • 一个web前端工程师到底需要掌握哪些技能?基础知识_技能零基础入门

    对于前端基础需要学习哪些内容,之前文章已经有写过不少了,本篇重在谈论:作为一名前端想要晋升,需要什么条件?现在在用 React,要不要也学学 Vue?有必要学习 Node.js/Flutter/ 函数式吗?这几个问题看似毫无关联,但是其实它们本质上都是同一个问题,这个问题就是“一个前端工程师到底需要掌握哪些技能?”其实在行业里面,对前端工程师的能力模型有一个

    2020/03/26
  • Js闭包有什么用?使用帮助_闭包使用指南

    “官方”的解释是:所谓“闭包”,指的是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。相信很少有人能直接看懂这句话,因为他描述的太学术。我想用如何在Javascript中创建一个闭包来告诉你什么是闭包,因为跳过闭包的创建过程直接理解闭包的定义是非常困难的。JavaScript闭包详解看下面这段代码:func

    2020/03/20
  • 开发一个高质量的前端组件,这些姿势一定要知道使用帮助_组件小白攻略

    从今天(2019 年)这个时间节点来看,NPM 无论从知名度、模块数量、社区的话题数量来看,都算得上是一骑绝尘,将其他语言的模块仓库远远甩在了后面。数据来源: moudlecountsNPM 的生态既已如此成熟,按说开发者对于 NPM 包的发布和维护应该非常熟悉才是,但事实真的是这样吗?环顾身边的 FE,没有发过任何 NPM 包的同学大有人在,已经发过包的同

    2020/03/23