SPA中,Node路由优先级高于React路由
一、问题描述
在一场面试中,面试官问到了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>

<b>hash模式</b>

>图片来源于<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路由的更多相关文章
- Maven传递依赖的坑:父pom中dependencyManagement版本优先级高于传递依赖版本
一.由来 之前同事问了个问题,就是当前工程为spring boot项目,假设版本号为2.0.3 这个项目中依赖了一个spring boot项目依赖(先别管为啥有这么奇葩的依赖,这个版本是1.5.9). ...
- java中&& 的运算优先级高于||
public class First { public static void main(String[] args) { boolean a = false; boolean b = true; b ...
- 简单的说一下react路由(逆战班)
现代前端大多数都是SPA(单页面程序),也就是只有一个HTML页面的应用程序,因为它的用户体验更好,对服务器压力更小,所以更受欢迎,为了有效的使用单个页面来管理原来多页面的功能,前端路由应运而生. 前 ...
- 解决React路由URL中hash(#)部分的显示 、browserHistory打包后浏览器刷新页面出现404的问题
摘要 在React项目中,我们需要采用它的路由库React-Router来进行页面跳转,React会根据路由URL来判断是哪个页面.常见的的URL有两种显示方式,一种是hashHistory的形式,形 ...
- SPA中前端路由基本原理与实现方式
SPA 前端路由原理与实现方式 通常 SPA 中前端路由有2中实现方式,本文会简单快速总结这两种方法及其实现: 修改 url 中 Hash 利用 H5 中的 history Hash 我们都知道 ur ...
- 「实践篇」解决微前端 single-spa 项目中 Vue 和 React 路由跳转问题
前言 本文介绍的是在做微前端 single-spa 项目过程中,遇到的 Vue 子应用和 React 子应用互相跳转路由时遇到的问题. 项目情况:single-spa 项目,基座用的是 React,目 ...
- React路由-进阶篇
路由进阶 1.多级路由,和之前的思想一样,在子路由里面继续写Route,继续挂载组件,就可以实现多级路由 比如这样:class Food extends Component{ render() { r ...
- 【React 8/100】 React路由
React路由 React路由介绍 现代的前端应用大多数是SPA(单页应用程序),也就是只有一个HTML页面的应用程序.因为它的用户体验更好.对服务器压力更小,所以更受欢迎.为了有效的使用单个页面来管 ...
- 七天接手react项目 系列 —— react 路由
其他章节请看: 七天接手react项目 系列 react 路由 本篇首先讲解路由原理,接着以一个基础路由示例为起点讲述路由最基础的知识,然后讲解嵌套路由.路由传参,最后讲解路由组件和一般组件的区别,以 ...
随机推荐
- win7 怎么设置开机直接进入桌面? netplwiz 命令
电脑没设置密码,开机如何跳过帐户已锁定的界面,直接进入桌面呢? 1.单击[运行],或按快捷键:win+r2.输入命令:netplwiz 单击[确定]3.单击你的登录账户4.去掉[要使用本机,用户名必须 ...
- [转载]asp.net中,<%#%>,<%=%>和<%%>分别是什么意思,有什么区别
在asp.net中经常出现包含这种形式<%%>的html代码,总的来说包含下面这样几种格式: 一. <%%> 这种格式实际上就是和asp的用法一样的,只是asp中里面是vbsc ...
- .NET 常用ORM之Gentle.Net
.Net常用的就是微软的EF框架和Nhibernate,这两个框架用的都比较多就不做详细介绍了,今天我们来看看Gentle.Net,Gentle.Net是一个开源的优秀O/R Mapping的对象持久 ...
- linux 下面压缩、解压.rar文件
一,解压问题 在网上下东西的时候,经常会遇到.rar后缀的文件,我用tar解压,解压不出,上网找啊找,一直没找到什么合适的工具来压缩和解压.rar后缀的文件,现在我找到了. 二,rar和unrar安装 ...
- 【开源】EasyFlash 新年发布 V4.0 beta 版,完全重写(转)
[开源]EasyFlash 新年发布 V4.0 beta 版,完全重写 EasyFlash V4.0 beta [开源]嵌入式闪存库 EasyFlash for STM32,支持Env和IAP
- ELK学习笔记之F5利用EELK进行应用数据挖掘系列(2)-DNS
0x00 概述 很多客户使用GTM/DNS为企业业务提供动态智能解析,解决应用就近性访问.优选问题.对于已经实施多数据中心双活的客户,则会使用GSLB提供双活流量调度.DNS作为企业业务访问的指路者, ...
- 用Java实现MVPtree——MVPtree点集内去重以及衍生出来的多维向量Hash问题
上次完成了MVPtree之后,客户又提出了MVPtree点集元素重复的问题,希望我将元素去重. 集合去重哪家强?java.util找HashSet!如果不计较元素顺序,放进去基本就没有重复元素了. 只 ...
- python面向对象三大特性之一继承、多态、封装
继承,即在定义一个类时,以另一个类为参数,则称这个新定义的类继承了参数类,父类又称为基类. 单继承表示只继承一个类,多继承表示继承多个类. class parent1: pass class pare ...
- 使用v-for指令渲染列表
v-for:对集合或对象进行遍历: 使用v-for对数组遍历时: 效果如下: 代码: <script> window.onload= () =>{new Vue({ el:'#two ...
- 福州大学第十五届程序设计竞赛_重现赛B题迷宫寻宝
Problem B 迷宫寻宝 Accept: 52 Submit: 183Time Limit: 1000 mSec Memory Limit : 32768 KB Problem De ...