文章详细介绍了React中的路由机制，包括hash路由和history路由的工作原理及区别。React路由通过Route和Link标签管理界面与URL的同步，使用NavLink添加激活状态，借助withRouter实现函数中路由跳转，以及动态传值和query传值的方法。此外，还讨论了路由的懒加载和重定向功能。
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是同步还是异步的
扫一扫
2889
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
