react-router

[react-router]路由原理

参考链接


[react-router]hashHistory和browserHistory的使用

react-router提供了三种方式来实现路由,并没有默认的路由,需要我们在声明路由的时候,显示制定使用的路由


v2.0.0的三种路由:
    browerHistory
    hashHistory
    createMemoryHistory
    
// 使用的时候:
// hashHistory

import { hashHistory } from "react-router";
<Router history={hashHistory} />

官方推荐使用browerHistory

[react-router]hashHistory和browserHistory的区别

===== 视觉上的区别 =====

browerHistory更好一些,更加符合我们的审美观


使用hashHistory的时候,我们的路由是这样的: leafmaple.cn/#/git命令/

使用browerHistory的时候,我们的路由是这样的: leafmaple.cn/git命令/

===== 功能上的区别 =====

browerHistory需要服务端的支持, 而hashHistory不需要


使用hashHistory:
因为有 # 的存在,浏览器不会发送 request 请求,react-router会根据url去渲染相应的模块

使用browerHistory:
从 / 到  /git命令,浏览器会发送 request 请求,所有服务端需要做特殊的请求

for example :
使用express模块的时候,需要 handle 所有的路由 app.get('*', (req, res) => {...})

结束语

如果我们的只是静态页面的话,直接使用hashHistory就好了

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、基本用法 React Router 安装命令如下。 $ npm install -S react-router...
    sunnyghx阅读 4,544评论 0 6
  • Lesson11、首先确保安装了Node.js和npm依赖包管理工具2、在git上克隆官方示例程序 git clo...
    冰_心阅读 2,741评论 0 16
  • React-Router v4 1. 设计理念1.1. 动态路由1.2. 嵌套路由1.3. 响应式路由 2. 快速...
    wlszouc阅读 8,614评论 0 14
  • 有时会觉得,说到做到会是什么样的情况? 小时候,大人教导我们要诚实、负责。这样是为了我们长大不要成为投机取巧的人。...
    Tr孟阅读 299评论 0 0
  • 1.想一个最近的情况--某人不适当地谈到了"我的真理"。用自己的语言写两三段,用本章所学内容向那个人做出解释。 2...
    sxrunn阅读 171评论 0 1