react-router 踩坑记

react-router踩坑分享

背景

有一个Web项目,采用的是前后端分离的方式,前端使用的是react技术栈,后端使用的是Django框架。

有这么需求: 在一个新闻列表里,点击某一条新闻,要求新闻详情页里的title keywords description是动态的。

辛苦历程

JavaScript动态修改

当从后端取回数据时,用JavaScript动态改变title标签和meta标签就ok了。但是后来才发现,这个需求的目的是为了SEO,而爬虫可以爬到的数据是后端返回的html页面上的数据。如果是通过JavaScript来动态处理title keywords description的话,是不利于SEO的,因此,动态修改title keywords description只能放到后端做。后端将html拼接好,返回前端来,前端再进行相应的逻辑操作。

第一次尝试

当思路理清楚之后,其实想着也就很简单, 三步就可以了。

  1. 前端向后端发送请求。
  2. 后端获取前端发送请求的URL地址,得到参数,然后从数据库里读出相应的数据。
  3. 返回一个新的html页面。

然后开始进行测试:

首先,打开主页面,点击任意一条新闻,此时的url还是hash模式的。

当跳到新闻详情页表的时候,打开控制台,进入Network, 查看所发送的请求。

可以看见,请求的路径是localhost:3000, 也就是根目录,而后台配置的根路由的代码如下:

urlpatterns = [
  url(r'^$', TemplateView.as_view(template_name='index.html'), name='index'),
]

因此,可以知道,在请求后台的时候,后台返回了index.html模板回来。但是,问题出现了,我们想要返回的index.html里的keywords description title是在后端拼接好然后返回给前端,而目前我们所能实现的仅仅是返回一个index.html, 我们没办法改变那3个值,因为我们没有办法获取到前端的URL,或者说是前端没有办法传参数到后端去, 导致后端不能从数据库里查出来那三个值。

那么,现在需要解决的问题就是如何将参数传到后端去。

第二次尝试

由于,点击某条新闻的时候,跳到新闻详情页的时候,这是浏览器主动去向后端发送的请求,因此是很难去控制这个过程的。

所以,有了下面这个解决方案: 既然很难在浏览器主动发请求的时候去控制参数的传递,那么就不用去控制。而是在浏览器返回了index.html后,这个时候,已经有了新闻的id, 因此就可以人为的控制再发一次请求,这个时候后端配置一个路由,根据id去数据库里查找keywords description title, 并在后端拼接好返回给前端。只不过有个缺点,会刷新一次页面。

但是,在实践的过程中,我理论上推导了一次整个过程,当人为控制发请求后,后端返回一个index.html, 然后又会执行js文件,然后又会发请求,然后又会返回index.html, 然后又会执行js文件,然后又会发请求。。。 就这样,一直循环下去,显然是不可能的。

第三次尝试

这探索新的解决的方案的时候,了解了Http Header里的referer, 当浏览器向web服务器发送请求的时候,一般都会带上referer, 告诉服务器,我是从哪个连接来的。因为想着后端只要获取到了前端的URL,一切就搞定了,但是显而易见,referer依然不行。拿网易云音乐测试如下:

第四次尝试

在不断尝试的过程中,珩哥提到,后端获取不到前端的URL地址,是因为react-router路由是使用的hash路由(http://localhost:3001/#/news/index/4141?_k=mv8udy),如果将hashHistory改为browserHistory(http://localhost:3001/news/index/4141)的话,那么后端一定就可以获取到前端的URL。

解决方案:

cd projectName/app/src
vim app.js

// hash路由
import { Router, hashHistory as historyProvider, match } from 'react-router';

// 修改为browserHistory
import { Router, browserHistory as historyProvider, match } from 'react-router';

进行查看:

主页面:

新闻详情页:

总结步骤

  1. 设置react-router路由方式为: import { browserHistory } from 'react-router';
  2. 对服务器进行改造,否则用户直接请求某个某个路由,就会报404。
  3. 进行测试。

那么如何进行测试呢?

  1. 看前端的请求地址。
  2. 多刷新页面试试。(因为之前的是单页面的,就算改变了路由,还是不会向后台发送请求。)
  3. 多看title的变化, 会遗留title不变化或者说是变化出错的bug。
  4. 只要有处理路由相关的地方,都测一下。(很重要)

其他方案

不知道大家是否还有其他解决方案?

原理

History

是一个库,react-router基于它来管理历史会话记录。

简单的说,一个history知道如何去监听浏览器地址栏的变化,并解析这个URL转化为location对象,然后router使用它匹配到路由,最后正确地渲染对应的组件。

常见的3种History

BrowserHistory

它其实就是HTML5推出的历史记录API,可以把浏览器记录当作一个栈,通过History提供的API来对浏览器记录进行相应的操作。

常见的方法有下面这几种:

  1. history.push(path, [state])
  2. history.replace(path, [state])
  3. history.go(n)
  4. history.goBack()
  5. history.goForword()

BrowserHistory是使用react-router应用推荐的history。它使用浏览器中的HistoryAPI用于处理URL,会创建一个像example.com/some/path这样的真实的URL。

要使用这个History的话,必须在服务器端做好处理URL的准备。一般从下面几个方面来考虑:

  • 处理/的请求, Django简单配置如下:

    // urls.py
    from apps import views
    urlpatterns = [
    url(r'^$', views.index, name='index'),
    ]
  • 处理打开新页面的URL跳转,比如点击某条新闻,跳转到新闻详情页这样的URL跳转(即本文开头的介绍)。
  • 处理每个URL的路由, 这也是最容易被忽视的一部分。当你在导航栏里点来点去,显示是没有问题的,就像下面这样。

    但是当你刷新页面的时候,你会得到这样一个结果:

    这是由于,你的应用是单页的,当你点击导航栏的时候,页面并没有刷新,只是JavaScript去请求了后台,然后更新了前端路由和组件状态,但是没有刷新页面,导致没有去请求后台的地址。所以,必须为每个URL在后端配置路由。一般来说,只需要配置简单的根路由就可以了,除非你需要动态更改模板index.html上的数据。

HashHistory

Hash history使用URL中的hash(#)部分去创建形如: example.com/#/path的路由。

像?_k=ckuvip没用的URL是什么东西?
  1. 每个URL对应都会对应一个state对象,你可以在对象里存储数据(比如当前页面滚动到哪个位置了),但是这个数据不会出现在URL中。实际上,数据被存到了sessionStorage中。

  2. 当一个history通过应用程序的push或者replace作跳转时,它可以在新的location里存储location state, 而不用显示在URL中,它类似于一个HTML中的post的表单数据。

  3. 在DOM API中,这些hash history通过window.location.hash = newHash很简单地用于被跳转,且不用存储它们的location state。但我们想要每个history都能使用location.state, 因此要为每个location创建一个唯一的key, 并把它们的状态存储在sessionStorage中。当点击'后退'和'前进'时,我们就会有一个机制去恢复这些location state。

MemoryHistory

Memory history不会在地址栏里被操作或读取,这就解释了是如何实现服务端渲染的。

BrowserHistory与HashHistory的对比

实际上,两种History都只是人为控制路由的一种手段。

相同点:

它们都只是简单的改变了地址栏里的URL,如果没有刷新页面的话,都不会向后端主动发送请求。

不同点:

当页面刷新的时候,对于BrowserHistory, 浏览器会向后台发送整个URL的请求, 而对于HashHistory, 它只会请求后台的根目录。

使用场景

  1. 不能完全是单页应用。
  2. 必要要刷新页面,因为这样,才会有向后端发送请求。
  3. 需要动态改变模板里的内容,比如head里的内容。
  4. 不是特别复杂的系统。

其他

推荐阅读: 关于如何爬取ajax应用

感觉单页的seo,除了用SSR,就没有其他的办法了。

参考

react-guide

深入理解react-router

posted @ 2017-07-02 18:53 动机在未来 阅读(...) 评论(...) 编辑 收藏