Front-end/react/路由/9.路由.md

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)前进或者后退到某个页面(后退用-)

默认路由

            <Route path ="/" element={<LoginApp/>} ></Route>

默认情况下React是模糊匹配模式 精确匹配添加exact

            <Route exact  path ="/home" element={<HomeApp/>} ></Route>

React路由一切都是组件,可以像思考组件一样思考路由.

HashRouter 路径中包含#,#后所有资源都不发送服务器.

路由组件(

):放到pages文件夹下,传入大量props信息 一般组件():放到components,默认不传props内容,无history

NavLink 默认点击高亮(activeClassName)