39 lines
1.7 KiB
Markdown
39 lines
1.7 KiB
Markdown
npm i react-router-dom@5
|
|
为有效使用单页面管理原来的多页面的功能,前端路由应运而生.
|
|
从一个视图跳转到另一个视图,是URL路径与组件的对应关系.
|
|
1. 安装路由 npm i react-router-dom
|
|
2. 导入 import { BrowserRouter as Router,Route,Link } from 'react-router-dom';
|
|
3. 使用Router包裹整个组件
|
|
4. 使用Link(解析为a标签)组件作为导航菜单路由入口
|
|
5. 使用Route配置路由的规则和要展示的组件路由出口
|
|
## 路由执行过程
|
|
1. 点击Link组件(a标签),修改了浏览器地址栏中url
|
|
2. React路由监听到地址栏url的变化
|
|
3. React路由内部遍历所有Route组件,使用路由规则(path)与pathname进行匹配
|
|
4. 当路由规则(path)能够匹配地址栏中的pathname时,就展示改route组件内容
|
|
## 编程式导航
|
|
通过js代码来实现页面跳转 this.pops.history.push('/home')
|
|
history是react路由提供的,用于获取浏览器历史记录的相关信息
|
|
push(path):跳转到某个页面,参数path表示要跳转的路径
|
|
go(n)前进或者后退到某个页面(后退用-)
|
|
|
|
<Redirect to="/home"></Redirect>
|
|
<Navigate to="/about"></Navigate>
|
|
## 默认路由
|
|
```
|
|
<Route path ="/" element={<LoginApp/>} ></Route>
|
|
```
|
|
默认情况下React是模糊匹配模式
|
|
精确匹配添加exact
|
|
```html
|
|
<Route exact path ="/home" element={<HomeApp/>} ></Route>
|
|
```
|
|
|
|
React路由一切都是组件,可以像思考组件一样思考路由.
|
|
|
|
HashRouter 路径中包含#,#后所有资源都不发送服务器.
|
|
|
|
路由组件(<Header/>):放到pages文件夹下,传入大量props信息
|
|
一般组件(<Route path="/about" component={About} />):放到components,默认不传props内容,无history
|
|
|
|
NavLink 默认点击高亮(activeClassName) |