admin管理员组文章数量:1634344
目录
单页应用程序 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://m.elefans.com/xitong/1729175686a1188684.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论