目录
单页应用程序 SPA:
- 整个应用只有一个完整的页面
- 点击页面中的链接不会刷新页面，只会做页面的局部更新
- 数据都需要通过ajax请求获取, 并在前端异步展现。
路由:
前端路由：
- 浏览器端路由，value是component，用于展示页面内容
- 注册路由:
<Route path="/test" component={Test}> - 工作过程：当浏览器的path变为/test时, 当前路由组件就会变为Test组件
后端路由：
- 理解： value是function, 用来处理客户端提交的请求。
- 注册路由： router.get(path, function(req, res))
- 工作过程：当node接收到一个请求时, 根据请求路径和方法找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据
一个路由就是一个映射关系(key:value)
key为路径, value可能是function或component
路由的基本使用
使用步骤
- 安装：
react-router-dom - 导入路由的三个核心组件：Router/Route/Link
import { BrowserRouter as Router, Route, Link } from 'react-router-dom' - 使用Router 组件包裹整个应用（重要）
<Router>
<div className="App">
//...
</div>
</Router>
- 使用Link 组件作为导航菜单（路由入口）
<Link to="/first">页面一</Link> - 使用Route 组件配置路由规则和要展示的组件（路由出口）
const First = () => <p>页面一的页面内容</p>
<Router>
<div className="App">
<Link to="/first">页面一</Link>
<Route path="/first" component={First}></Route>
</div>
</Router>
常用组件说明
- Router组件：包裹整个应用，一个React应用只需要使用一次
- 两种常用Router：HashRouter和BrowserRouter
- HsahRouter：使用URL的哈希值实现(localhost：3000/#/first)
- (推荐)BrowserRouter：使用H5的history API实现(localhost：3000/f