React学习笔记PartV

b站课程链接跳转

ps&＃xff1a; written by Winter-prince

学习前端React做的笔记&＃xff0c;供以后复习使用。关键代码基本上都有截图和文字说明&＃xff0c;有些部分可能由于内容比较简单没有记录&＃xff0c;点击上方课程链接即可跳转前往课程查看详情&＃xff0c;关于React的笔记一共有5篇博客&＃xff0c;如果需要查看完整内容的请前往专栏查看

我的github&＃xff1a;Winter-prince

P81-100

P81 switch的使用

一个路径对应一个组件

如果不使用switch&＃xff0c;那么匹配成功之后还会继续向下匹配。

如果使用了switch&＃xff0c;那么匹配成功之后就不会再继续向下匹配了。

P82 解决样式丢失问题

多级路径问题

1. public/index.html中引入样式时不写./ 写 / (常用)
2. public/index.html中引入样式时不写./写 %PUBLIC_URL%( 常用)
3. 使用HashRouter

P83 路由的模糊匹配和严格匹配

1.默认使用的是模糊匹配(简单记:[输入的路径]必须包含要[匹配的路径]&＃xff0c;且顺序要-致)
2.开启严格匹配:
3.严格匹配不要随便开启&＃xff0c;需要再开&＃xff0c;有些时候开启会导致无法继续匹配二级路由

模糊匹配

精准匹配

exact&＃61;true、exact

<Switch><Route exact&＃61;{true} path&＃61;"/about" component&＃61;{About} /><Route exact&＃61;{true} path&＃61;"/home" component&＃61;{Home} />
Switch>;

或者

<Switch><Route exact path&＃61;" /about" component&＃61;{About} /><Route exact path&＃61;"/home" component&＃61;{Home} />
Switch>;

P84 redirect的使用

兜底&＃xff0c;当所有的路由都没有匹配上就使用redirect

import {Route , Switch, Redirect} from &＃39;react-router-dom&＃39;


<Switch><Route path&＃61;" / about" component&＃61;{About} /><Route path&＃61;" /home" component&＃61;{Home} /><Redirect to&＃61;"/about" />
Switch>;


P85 嵌套路由

一级

<div className&＃61;"panel- body"><Switch>{/*注册路由*/}<Route path&＃61;" /about" component&＃61;{About} /><Route path&＃61;"/home" component&＃61;{Home} /><Redirect to&＃61;"/about" />Switch>
div>;


二级

<Switch><Route path&＃61;"/home/news" component&＃61;{News} /><Route path&＃61;"/home/message" component&＃61;{Message} /><Redirect to&＃61;"/home/news" />
Switch>;


总结

1.注册子路由时要写上父路由的path值

2.路由的匹配是按照注册路由的顺序进行的

P86 向路由组件传递params参数数据

总结

向路由组件传递参数

params参数

路由链接(携带参数): 详情

注册路由(声明接收):

接收参数:

const {id,title} &＃61; this . props . match. params

P87 向路由组件传递search参数

{/*向路由组件传速search参数*/}
<Link to&＃61;{&＃96;/home/message/detail/?id&＃61;${msgObj.id}&title&＃61;${msgObj.title}&＃96;}>{msgObj.title}</Link>


内置querystring

import qs from "querystring";
let obj &＃61; { name: "tom", age: 18 }; //name&＃61;tom&age&＃61;18”. key&＃61;value&key&＃61;value
console.log(qs.stringify(obj));
let str &＃61; "carName&＃61;奔驰&price&＃61;199";
console.log(qs.parse(str));


代码实现

总结
search参数

路由链接(携带参数): 详情

注册路由(无需声明&＃xff0c;正常注册即可):

接收参数: this . props. location. search

备注:获取到的search是urlencoded编码字符串&＃xff0c;需要借助querystring解析

P88 向路由组件传递state参数

state在地址栏是隐藏的

这个state和组件state没有任何关系

传参

注册路由

{/* state参数无需声明接收&＃xff0c;正常注册路由即可*/}
<Route path&＃61;"/home/message/detail" component&＃61;{Detail}/>


接收参数

总结

state参数

路由链接(携带参数): 详情

注册路由(无需声明&＃xff0c;正常注册即可):

接收参数: this . props .location. state

备注:刷新也可以保留住参数

P89 总结路由参数

略

P90 路由跳转的两种模式

push和replace

push压栈&＃xff0c;留下痕迹

replace替换&＃xff0c;不留下痕迹

默认为push&＃xff0c;设置参数replace为true&＃xff0c;则设置为replace模式

P91 编程式路由导航

使用props.history.replace方法实现replace路由跳转

使用props.history.push方法实现push路由跳转

replaceShow &＃61; (id, title) &＃61;> {
// replace跳转 &＃43; 携带params参数;this.props.history.replace(&＃96;/home/message/detail/${id}/${title}&＃96;);
// replace跳转 &＃43; 携带search参数;this.props.history.replace(&＃96;/home/message/detail?id&＃61;${id}&title&＃61;${title}&＃96;);
// replace跳转 &＃43; 携带state参数;this.props.history.replace(&＃96;/home/message/detail&＃96;, { id, title });
};
pushShow &＃61; (id, title) &＃61;> {
// push跳转 &＃43; 携带params参数;this.props.history.push(&＃96;/home/message/detail/${id}/${title}&＃96;);
// push跳转 &＃43; 携带search参数;this.props.history.push(&＃96;/home/message/detail?id&＃61;${id}&title&＃61;${title}&＃96;);
// push跳转 &＃43; 携带state参数;this.props.history.push(&＃96;/home/message/detail&＃96;, { id, title });
};


功能

P92 withRouter的使用

react默认只有路由组件才有history

一般组件想要有history&＃xff0c;需要用withRouter加工

withRouter的返回值是一个新组件

P93 BrowserRouter和HashRouter

十三、BrowserRouter与HashRouter的区别

1.底层原理不一样:

BrowserRouter使用的是H5的history API,不兼容IE9及以下版本。

HashRouter使用的是URL的哈希值。

2.path表现形式不一样

BrowserRouter的路径中没有#,例如: localhost ; 3000/ demo/test

HashRouter的路径包含#,例如: localhost :3000/ #/demo/test

3.刷新后对路由state参数的影响

(1) . BrowserRouter没有任何影响&＃xff0c;因为state保存在history对象中。

(2) . HashRouter刷新后会导致路由state参数的丢失。

4.备注: HashRouter可以用于解决一些路径错 误相关的问题。

P94 UI组件库

angular react vue

material-ui

element ui for react

…

P95 按需引入样式

P96 主题

antd less 编译

P97 redux

前面绝大多数的基础部分已经更新完了。