react的单页面应用SPA及路由组件

SPA的理解

1. 单页Web应用(sigle page web application,SPA)。
2. 整个用用只有一个完整的页面.
3. 点击页面中的链接不会刷新,只会做页面的局部刷新。
4. 数据都需要通过ajax请求获取,并在前端异步展现。

路由的理解

1. 什么是路由？

• 一个路由就是一个映射关系（key:value）
• key为路径，value可能就是function或者component

2. 路由分类

1. . 后端路由：
   • 理解：value 是function，用来处理客户端提交的请求。
   • 注册路由：router.get(path,function(req,res))
   • 工作过程：当node 接受一个请求时，根据请求路径找到匹配的路由，调用路由中的函数来处理请求，返回响应数据。

2.前端路由：

• 浏览器端路由，value是component，用于展示页面内容。
• 注册路由：<Route path="/test" component={Test}>
• 工作过程：当浏览器的path变为/test时，当前路由组件就会变为Test组件

react-router-dom

npm add react-router-dom

路由组件的基本使用

1. 明确好界面的导航区、展示区
2. 导航区的a标签改为Link标签

3. 展示区写Route标签进行路径的匹配
4. <App>的最外层包裹了一个<BrowerRouter>或者<HashRouter>

路由组件与一般组件

1. 写法不同：

    一般组件：<Demo/>
    路由组件:<Route path="/demo" copontent={Demo}/>
   

2. 存放位置不同：

    一般组件：compontents
    路由组件：pages