React路由
程序员文章站
2024-02-14 16:05:10
...
一、React路由: 实现单页应用的核心技术(单页应用 简称SPA)
路由实现原理:通过H5 history API和url hash
路由原理参考资料:
https://segmentfault.com/a/1190000007238999
https://segmentfault.com/a/1190000011967786
二、React路由实现有两个包:
1.react-router
2.react-router-dom
官网:https://reacttraining.com/react-router/
官方github:https://github.com/ReactTraining/react-router
中文路由文档:http://reacttraining.cn/web/example/basic
三、React-router-dom具体使用
Route:视图展示 区 相当于vue中的router-view
Link:要跳转的指令 相当于vue中的router-link
步骤:
1.安装react-router-dom
2.创建路由文件
3.引入到入口文件:index.js
其中:路由文件中的具体配置
1.引入所需的包:
import React from 'react';
import {
BrowserRouter as Router,
Route,
Link,
Switch,
NavLink
} from 'react-router-dom';
2.用Link指令指令要跳转的路径
例如:
<Link to="/">首页</Link>
3.指定在哪个区域显示视图
例如:
<Route exact path="/" component={Home} />
注意:exact 表示是精确匹配,必须要加
4.如何指定高亮
可以通过NavLink指令指定,专为导航服务的
例如:
<NavLink exact to="/">首页</NavLink>
可以通过activeClassName指定高亮类的样式,如果不指定activeClassName,可以直接使用active类名即可
5.路由传参
<Route path={`${match.url}/:要接收的参数名`} component={Topic}/>
JSX接收参数:match.params.参数名
Reacr UI库 antd: 阿里
文档https://ant.design/docs/react/introduce-cn
redux: react中的状态管理工具 相当于vue中的vuex
转载于:https://www.jianshu.com/p/ff2eeade8c4b