zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    vue 使用 <iframe> 嵌入网页 地址实现动态配置
    vue 视频播放 vue-video-player
    vue 实现自定义序号, 并且翻页序号累加。
    关于 vue 使用 Handsontable 表格数据导出
    node.js Stream流的使用
    手把手教如何搭建node+egg项目 引入Sequelize
    实现 通过数据库里一个字段值相等 则把 他合为一条数据
    最近在项目中碰到把对象数组转为键值对,
    js 的数组怎么push一个对象. Js数组的操作push,pop,shift,unshift JavaScrip
    for循环
  • 原文地址:https://www.cnblogs.com/yzfdjzwl/p/7106792.html
Copyright © 2011-2022 走看看