admin管理员组文章数量:1633926
目录
单页应用程序 SPA:
路由:
前端路由：
后端路由：
路由的基本使用
使用步骤
常用组件说明
BrowserRouter和HashRouter的区别
路由的执行过程
默认路由
精确匹配
Switch的使用
重定向路由
嵌套路由
向路由组件传递参数
1.params参数
2.search参数
3.state参数
编程式路由导航
withRouter
单页应用程序 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
版权声明：本文标题：【React】路由（详解） 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/xitong/1729175686a1188684.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论