react-路由

react-路由

单页面应用

• SPA(single page application):

  • 整个应用只有一个完整的页面

  • 点击页面中的链接不会刷新页面，只会做页面的局部更新

  • 数据需要通过ajax请求获取，并且在前端异步展示

路由的理解

什么是路由？

• 一个路由就是一个映射关系(key:value)
• key为路径，value可能是function或component
  • function:后端路由
  • component:前端路由

路由分类？

• 后端路由：
  • 理解：value是function，用来处理客户端提交的请求
  • 注册路由：router.get(path,function(req,res))
  • 工作过程：当node接收到一个请求时，根据请求路径找到匹配的路由，调用路由中的函数来处理请求，返回响应数据
• 前端路由：
  • 浏览器路由：value是component，用于展示页面内容
  • 注册路由：<Route path="/test" component={Test}>
  • 工作过程：当浏览器的path变为/test时，当前路由组件就会变为Test

两种路由方式

• 路由有两种创建方式：history路由、hash路由

• <script type="text/javascript" src="https://cdn.bootcss.com/history/4.7.2/history.js"></script>
  //引入第三方js
  

history路由