react
的路由保证了界面和URL
的同步,拥有简单的API
和强大的功能。react
中的路由模式有两种,分别是:hash
路由和history
路由
首先用析构的方法引入需要用到的路由方式,需要注意的是路由所有的配置都必须被包裹在hash
路由或者history
路由里面。
然后在路由标签内先再配置Route
标签,它的参数有:path
,路由匹配的路径component
,路由匹配成功之后渲染的组件。
react
中路由的跳转使用Link
标签,它的参数to
指路由匹配的路径,也需要引入
NavLink
标签和Link
的区别就是渲染成a
标签之后会自带一个class
属性,对应的是NavLink
标签的active
属性。
react
路由中有高阶路由组件withRouter
,它和普通路由一样需要引入,主要作用是增加了路由跳转的方式,可以调用history方法进行函数中路由的跳转
react
中路由的动态传值是一个重点,{:属性名}和{属性名:值}搭配的方式进行传值,在需要接收参数的组件通过this.props.match.params
来进行接收
react
中路由的query
传值是通过问号的方法将参数拼接在url
之后,在需要接收参数的组件通过url.parse(this.props.location.search).query
获取参数
路由的重定向需要用组件Redirect
来完成,参数to
是目标组件
路由的懒加载需要从react
中引入Suspense
和lazy
引入组件时通过lazy(() => import())
来引入
使用Suspense
标签将Route
包裹起来即可。
react
中路由模式分为hash
路由和history
路由
hash
路由的原理是window.onhashchange
监听,url
前面会有一个#号,这个就是锚点,每个路由前面都会有#
锚点,特点是#
之后的数据改变不会发起请求,因此改变hash
不会重新加载页面
history
路由的原理是window.history API
,在HTML5
中新增了pushState
和replaceState
方法,这两个方法是在浏览器的历史记录栈上做文章,提供了对历史记录做修改的功能,虽然更改了url
但是不会向服务器发起请求
history
模式虽然去掉了hash
模式的#
锚点,但是它怕刷新,因为刷新时是真实的请求。而hash
模式下,修改的是#
锚点之后的信息,浏览器不会将#
锚点之后的数据发送到服务器,所以没有问题
(AIhelp智能问答)
框架篇-面试题9-React中setState是同步还是异步的