目录
路由组件和一般组件
1.写法不同:
- 普通组件:<component />
- 路由组件:<Route path="" component={component} />
2.开发者规范中,存放路径不同
- 普通组件:components/xxx
- 路由组件:pages/xxx
3.找bug方式不同:
- 普通组件:
- 1:导入组件路径对不对
- 2:介绍践变量名字单词是否大写
- 路由组件:
- 1: 看url中路由地址
- 2: 看注册的path与 url的路由地址是否一致
- 3: 看component属性注册的组件对不对
4.props接收的值不同:
- 普通组件: 自定义属性传值
- 路由组件: 注册并渲染会自动传值
- history
- location
- match
- 记录路由地址详情详细,或者提供修改路由地址方法
1、路由的基本使用
Link 作用:更改url中路由地址变化(path)
Route 注册路由组件
path 作用:告诉Route 哪一个path地址,可以配置到当前注册的路由组件
component 作用:将普通的组件,注册为路由组件。
<Route path={'/about'} component={About} />
<Route path={'/Home'} component={Home} />
使用注意事项:
1: 将路由组件作为 <Router /> 的子组件
2: Router 又有
<BrowserRouter> 为history模式的路由
<HashRouter> 为hash模式的组件
路由开发基本思路是什么?
1:确定页面导航部分。作用:更改路由地址变化path
<Link /> 编写导航
2:展示区域展示的内容
path 匹配大的路由组件
<Route /> 注册路由组件
props
路由组件的props在测组件时候,自动传入内容
history location match 作用:记录路由地址
2、路由的高亮显示
1 NavLink 链接标签,作用:更改url中paht2 编译后为a标签。当前选中 链接 会有 class=“active'
3 activeClassName 更改默认选中的类名
4 用途:实现路由的高亮显示
5:activeStyle 对象, 作用:给选中路由单独设置样式
3、路由匹配模式
两种模式
精准匹配(exact):必须式某个地址`/path` 才能匹配成功模糊匹配(默认):一某个地址 为开头的配置规则 `/^\/path*/`
4、Switch
Switch 在多个匹配结果中,渲染第一个RouteRoute 渲染的循序与书写顺序油感
1:看匹配;多个
2:先渲染辈分高的,同辈分,按照书写顺序加载
注意:最新版本的 react-router@6 已经删除了
5、Redirect
Redirect 路由重定向。1:检测url中path是否可以匹配的Route
如果可以 不触发Redirect
没有匹配到,触发Redirect 更改url中path地址
重新匹配Route,渲染匹配到Route
注意:书写位置,可以在任意地方使用组件,有bug
建议放在最后一个Route下面
404 是兜底操作。
属性
from 作用:监听url中path(默认模糊匹配),告诉Redirict 是否重定向。to 作用:重定向地址
类型 string|obj
exact 精准匹配,约束from
触发条件
1:path没有匹配到Route2: 满足from赋值匹配条件
3:必须在Route后面写。
6、嵌套路由
一级路由下面还有二级路由或者三级路由
7、路由传参
params
参数结构 `/home/list/1`1: 在`Route` 定义params参数的·`key`,语法`/hoem/list/:id/:title`
2:在`NavLink Link` 中给params参数`赋值` 语法 `/home/list/1/测试`
3:在渲染的`路由组件中` 通过 `props.match.params` 获取pramas参数
search
结果 `/home/list?id=1&title=测试`1: 在`NavLink Link` 中给params参数`赋值` 语法 `/home/list?id=1&title=测试`
2: 在渲染的`路由组件中` 通过 `props.location.search` 获取search,
3: 将参数字符变为对象,在渲染参数.
state
1: 在`NavLink Link` 中to`赋值` 对象 `{pathname,state}`2: 在渲染的`路由组件中` 通过 `props.location.state` 获取state,
注意:在url中没有显示参数,他是利用浏览器中history location对象实现路由传参的
路由找bug思路
样式错误:1:看浏览器编译后的代码,解析的html css
2: 看浏览器的`/path` 与 `NavLink`的to的赋值,是否存在,
3:activeClass 赋值,在css中是否存**有效的选择器样式**
以上都没有问题:`看看是不是浏览器在解析时候丢失了样式文件。`
渲染错误:
一看,url的path
二看:Route 的 path,与url的path是否一致?
三看:Route 中componet注册组件是否存在?