react路由（react-router）

react路由

react实现路由要借助库，我这里使用的是react-router，专门用来实现spa应用，而且很多项目都会使用到这个库。

SPA:

1.  单页Web应用（single page web application，SPA）
   

2.  整个应用只有一个完整的页面
   

3.  点击页面中的链接不会刷新页面, 本身也不会向服务器发请求
   

4.  当点击路由链接时, 只会做页面的局部更新
   

5.  数据都需要通过ajax请求获取, 并在前端异步展现
   

什么是路由？

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组件
   

路由相关的API

1.  <BrowserRouter>
   

2.  <HashRouter>
   

3.  <Route>
   

4.  <Redirect>
   

5.  <Link>
   

6.  <NavLink>
   

7.  <Switch>
   

8.  history对象
   

9.  match对象
   

10. withRouter函数
    

以上组件可参考官方的使用说明 点击进入