react-router

react-router 的理解

阮一峰教程

1. react 的一个插件库
2. 专门用来实现一个 SPA 应用
3. 基于 react 的项目基本都会用到此库

React中路由主要有两种方式：

• hash路由
• history路由

react-router原理

几个重要问题

1) SPA 的理解

1. 单页 Web 应用（single page web application，SPA）
2. 整个应用只有一个完整的页面
3. 点击页面中的链接不会刷新页面, 本身也不会向服务器发请求
4. 当点击路由链接时, 只会做页面的局部更新
5. 数据都需要通过 ajax 请求获取, 并在前端异步展现

2) 路由的理解

1. 什么是路由?
   路由链接，不会发送请求
   a. 一个路由就是一个映射关系(key:value)
   b. key 为路由路径, value 可能是 function/component
2. 路由分类
   后台路由: node 服务器端路由, value 是 function, 用来处理客户端提交的请求并返回一个响应数据
   前台路由: 浏览器端路由, value 是 component, 当请求的是路由 path 时, 浏览器端没有发送 http 请求, 但界面会更新显示对应的组件
3. 后台路由
   a. 注册路由: router.get(path, function(req, res))
   b. 当 node 接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来
   处理请求, 返回响应数据
4. 前端路由
   a. 注册路由: < Route path="/about" component={About}>
   b. 当浏览器的 hash 变为#about 时, 当前路由组件就会变为 About 组件

3) 关于url中的 #

1. 理解#
   '#'代表网页中的一个位置。其右面的字符，就是该位置的标识符
   改变#不触发网页重载
   改变#会改变浏览器的访问历史
2. 操作#
   window.location.hash读取#值
   window.onhashchange = func 监听hash改变
   3. 参考: 阮一峰教程

相关API

1). react-router中的相关组件:
Router: 路由器组件, 用来包含各个路由组件
Route: 路由组件, 注册路由
IndexRoute: 默认子路由组件
hashHistory: 路由的切换由URL的hash变化决定，即URL的#部分发生变化
Link: 路由链接组件

2). Router: 路由器组件
属性: history={hashHistory} 用来监听浏览器地址栏的变化, 并将URL解析成一个地址对象，供React Router匹配
子组件: Route

3). Route: 路由组件
属性1: path="/xxx"
属性2: component={Xxx}
根路由组件: path="/"的组件, 一般为App
子路由组件: 子配置的组件

4). IndexRoute: 默认路由
当父路由被请求时, 默认就会请求此路由组件

5). hashHistory
用于Router组件的history属性
作用: 为地址url生成?_k=hash, 用于内部保存对应的state

6). Link: 路由链接
属性1: to="/xxx"
属性2: activeClassName=“active”