一、问题描述

在一场面试中,面试官问到了React和Node路由之间的关系.

现在SPA(单页面应用)的使用越来越广。

Node(后台)和React(前端)都有自己的路由,当我页面访问一个URL的时候,其中的路由究竟是以哪个为准呢?

答案是Node路由优先级更高

所以会经常出现React设置了Router,但刷新访问的时候就出现了404.

因为当你刷新一个URL时,首先会在node中识别是否存在这个路由,因为我们并没有设置这个路由(仅仅在React中设置了而已),所以会出现Can't not GET /xxx

二、解决方法

可能想到既然是Node先处理url,那我保证Node和React的路由都一致不就行了!这样既不错报错也能执行React的路由了。

貌似确实行得通!但是这样不仅麻烦,而且官方不建议!

下面提供部分方法可以解决大部分简单的情况:

2.1 Node(express/koa)只渲染html

这个是我最经常使用的方式
```
var express = require('express');
var router = express.Router();

/* GET home page. */

router.get('/', function(req, res, next) {

res.render('index');

});

用webpack打包(也可以不打包)后,在根html模板里引入相关的js, 然后node用根路径`/`去匹配该html模板.这样无论如何node都不会报404了

<h4>2.2 在node返回404的时候,指向html</h4>

router.get('*',(ctx, next) => {

ctx.type = 'html';

ctx.body = fs.createReadStream('./index.html');

});


<h4>2.3 选择合适的路由方式</h4>
`hashRouter`: hash路由会挂在服务端所有路由到前端 `BrowserRouter`: history 模式(BrowserRouter:浏览器路由)改变 url 的方式会导致浏览器向服务器发送请求,如果匹配不到任何静态资源,则应该始终返回同一个 html 页面。 比如下面两个图的对比:
<b>histroy模式(BrowserRouter)</b> ![](https://img2018.cnblogs.com/blog/1414709/201810/1414709-20181014165202387-951484743.png) <b>hash模式</b> ![](https://img2018.cnblogs.com/blog/1414709/201810/1414709-20181014165247040-1058038302.png) >图片来源于<a href="https://blog.csdn.net/github_26672553/article/details/76906488" target="_blank">《react.js的两种路由方式:HashRouter》</a> 可以看到hash路由解决了这个问题,但是hash路由多了一个丑丑的`/#/` 使用hashHistory时,因为有 # 的存在,浏览器不会发送request,react-router 自己根据 url 去 render 相应的模块。 <h3>三、后续</h3>
当然,路由的选择不仅仅局限于此,还包括是否需要按需加载、路由参数使用等等。 后面会解释一下为什么hash路由路径上会出现这么多的哈希值,并且出现的原因和作用是什么? `react-route`底层的一些原理和详细的用法可以参考这篇文章:
<a href="https://www.cnblogs.com/wyaocn/p/5805777.html" target="_blank">《
深入理解 react-router 路由系统》</a>

SPA中,Node路由优先级高于React路由的更多相关文章

  1. Maven传递依赖的坑:父pom中dependencyManagement版本优先级高于传递依赖版本

    一.由来 之前同事问了个问题,就是当前工程为spring boot项目,假设版本号为2.0.3 这个项目中依赖了一个spring boot项目依赖(先别管为啥有这么奇葩的依赖,这个版本是1.5.9). ...

  2. java中&& 的运算优先级高于||

    public class First { public static void main(String[] args) { boolean a = false; boolean b = true; b ...

  3. 简单的说一下react路由(逆战班)

    现代前端大多数都是SPA(单页面程序),也就是只有一个HTML页面的应用程序,因为它的用户体验更好,对服务器压力更小,所以更受欢迎,为了有效的使用单个页面来管理原来多页面的功能,前端路由应运而生. 前 ...

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

    摘要 在React项目中,我们需要采用它的路由库React-Router来进行页面跳转,React会根据路由URL来判断是哪个页面.常见的的URL有两种显示方式,一种是hashHistory的形式,形 ...

  5. SPA中前端路由基本原理与实现方式

    SPA 前端路由原理与实现方式 通常 SPA 中前端路由有2中实现方式,本文会简单快速总结这两种方法及其实现: 修改 url 中 Hash 利用 H5 中的 history Hash 我们都知道 ur ...

  6. 「实践篇」解决微前端 single-spa 项目中 Vue 和 React 路由跳转问题

    前言 本文介绍的是在做微前端 single-spa 项目过程中,遇到的 Vue 子应用和 React 子应用互相跳转路由时遇到的问题. 项目情况:single-spa 项目,基座用的是 React,目 ...

  7. React路由-进阶篇

    路由进阶 1.多级路由,和之前的思想一样,在子路由里面继续写Route,继续挂载组件,就可以实现多级路由 比如这样:class Food extends Component{ render() { r ...

  8. 【React 8/100】 React路由

    React路由 React路由介绍 现代的前端应用大多数是SPA(单页应用程序),也就是只有一个HTML页面的应用程序.因为它的用户体验更好.对服务器压力更小,所以更受欢迎.为了有效的使用单个页面来管 ...

  9. 七天接手react项目 系列 —— react 路由

    其他章节请看: 七天接手react项目 系列 react 路由 本篇首先讲解路由原理,接着以一个基础路由示例为起点讲述路由最基础的知识,然后讲解嵌套路由.路由传参,最后讲解路由组件和一般组件的区别,以 ...

随机推荐

  1. win7 怎么设置开机直接进入桌面? netplwiz 命令

    电脑没设置密码,开机如何跳过帐户已锁定的界面,直接进入桌面呢? 1.单击[运行],或按快捷键:win+r2.输入命令:netplwiz 单击[确定]3.单击你的登录账户4.去掉[要使用本机,用户名必须 ...

  2. [转载]asp.net中,<%#%>,<%=%>和<%%>分别是什么意思,有什么区别

    在asp.net中经常出现包含这种形式<%%>的html代码,总的来说包含下面这样几种格式: 一. <%%> 这种格式实际上就是和asp的用法一样的,只是asp中里面是vbsc ...

  3. .NET 常用ORM之Gentle.Net

    .Net常用的就是微软的EF框架和Nhibernate,这两个框架用的都比较多就不做详细介绍了,今天我们来看看Gentle.Net,Gentle.Net是一个开源的优秀O/R Mapping的对象持久 ...

  4. linux 下面压缩、解压.rar文件

    一,解压问题 在网上下东西的时候,经常会遇到.rar后缀的文件,我用tar解压,解压不出,上网找啊找,一直没找到什么合适的工具来压缩和解压.rar后缀的文件,现在我找到了. 二,rar和unrar安装 ...

  5. 【开源】EasyFlash 新年发布 V4.0 beta 版,完全重写(转)

    [开源]EasyFlash 新年发布 V4.0 beta 版,完全重写 EasyFlash V4.0 beta [开源]嵌入式闪存库 EasyFlash for STM32,支持Env和IAP

  6. ELK学习笔记之F5利用EELK进行应用数据挖掘系列(2)-DNS

    0x00 概述 很多客户使用GTM/DNS为企业业务提供动态智能解析,解决应用就近性访问.优选问题.对于已经实施多数据中心双活的客户,则会使用GSLB提供双活流量调度.DNS作为企业业务访问的指路者, ...

  7. 用Java实现MVPtree——MVPtree点集内去重以及衍生出来的多维向量Hash问题

    上次完成了MVPtree之后,客户又提出了MVPtree点集元素重复的问题,希望我将元素去重. 集合去重哪家强?java.util找HashSet!如果不计较元素顺序,放进去基本就没有重复元素了. 只 ...

  8. python面向对象三大特性之一继承、多态、封装

    继承,即在定义一个类时,以另一个类为参数,则称这个新定义的类继承了参数类,父类又称为基类. 单继承表示只继承一个类,多继承表示继承多个类. class parent1: pass class pare ...

  9. 使用v-for指令渲染列表

    v-for:对集合或对象进行遍历: 使用v-for对数组遍历时: 效果如下: 代码: <script> window.onload= () =>{new Vue({ el:'#two ...

  10. 福州大学第十五届程序设计竞赛_重现赛B题迷宫寻宝

    Problem B 迷宫寻宝 Accept: 52    Submit: 183Time Limit: 1000 mSec    Memory Limit : 32768 KB  Problem De ...