react-router踩坑分享
背景
有一个Web项目，采用的是前后端分离的方式，前端使用的是react技术栈，后端使用的是Django框架。
有这么需求: 在一个新闻列表里，点击某一条新闻，要求新闻详情页里的title keywords description是动态的。
辛苦历程
JavaScript动态修改
当从后端取回数据时，用JavaScript动态改变title标签和meta标签就ok了。但是后来才发现，这个需求的目的是为了SEO，而爬虫可以爬到的数据是后端返回的html页面上的数据。如果是通过JavaScript来动态处理title keywords description的话，是不利于SEO的，因此，动态修改title keywords description只能放到后端做。后端将html拼接好，返回前端来，前端再进行相应的逻辑操作。
第一次尝试
当思路理清楚之后，其实想着也就很简单, 三步就可以了。
- 前端向后端发送请求。
- 后端获取前端发送请求的URL地址，得到参数，然后从数据库里读出相应的数据。
- 返回一个新的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';
进行查看:
主页面:
新闻详情页:
总结步骤
- 设置react-router路由方式为:
import { browserHistory } from 'react-router';。 - 对服务器进行改造，否则用户直接请求某个某个路由，就会报404。
- 进行测试。
那么如何进行测试呢？
- 看前端的请求地址。
- 多刷新页面试试。(因为之前的是单页面的，就算改变了路由，还是不会向后台发送请求。)
- 多看
title的变化, 会遗留title不变化或者说是变化出错的bug。 - 只要有处理路由相关的地方，都测一下。(很重要)
其他方案
不知道大家是否还有其他解决方案？
原理
History
它是一个库，react-router基于它来管理历史会话记录。
简单的说，一个history知道如何去监听浏览器地址栏的变化，并解析这个URL转化为location对象，然后router使用它匹配到路由，最后正确地渲染对应的组件。
常见的3种History
BrowserHistory
它其实就是HTML5推出的历史记录API，可以把浏览器记录当作一个栈，通过History提供的API来对浏览器记录进行相应的操作。
常见的方法有下面这几种:
- history.push(path, [state])
- history.replace(path, [state])
- history.go(n)
- history.goBack()
- 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是什么东西？
-
每个URL对应都会对应一个state对象，你可以在对象里存储数据(比如当前页面滚动到哪个位置了)，但是这个数据不会出现在URL中。实际上，数据被存到了sessionStorage中。
-
当一个history通过应用程序的push或者replace作跳转时，它可以在新的location里存储
location state, 而不用显示在URL中，它类似于一个HTML中的post的表单数据。 -
在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, 它只会请求后台的根目录。
使用场景
- 不能完全是单页应用。
- 必要要刷新页面，因为这样，才会有向后端发送请求。
- 需要动态改变模板里的内容，比如
head里的内容。 - 不是特别复杂的系统。
其他
推荐阅读: 关于如何爬取ajax应用
感觉单页的seo，除了用SSR，就没有其他的办法了。