1. react-router 的理解

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

2.SPA的理解

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

3. 路由的理解

1. 什么是路由?
   a. 一个路由就是一个映射关系(key:value)
   b. key为路由路径, value可能是function/component

2. 路由分类
   a. 后台路由: node服务器端路由, value是function, 用来处理客户端提交的请求并返回一个响应数据
   b. 前台路由: 浏览器端路由, 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组件

4.如何编写路由效果

• 1.编写路由组件
• 2.在父路由组件中指定
  路由链接：<NavLink>

 {/*导航路由链接*/}
 <MyNavLink className="list-group-item" to='/about' >About</MyNavLink>
 <MyNavLink className="list-group-item" to='/home' >Home</MyNavLink>

路由: <Route>

 {/*可切换的路由组件*/}
    <Switch>
           <Route path='/about' component={About} />
           <Route path='/home' component={Home} />
           <Redirect to='/about'/>
    </Switch>

5.react-router相关API

组件

1. <BrowserRouter>
2. <HashRouter>
3. <Route>
4. <Redirect>
5. <Link>
6. <NavLink>
7. <Switch>

其他

1. history对象
2. match对象
3. withRouter函数

6.路由使用

6.1、准备

下载:react-router: npm install --save react-router

6.2、包装NavLink组件: components/my-nav-link.jsx

import React from 'react'
import {NavLink} from 'react-router-dom'

export default function MyNavLink(props) {
  return <NavLink {...props} activeClassName='activeClass'/>
}