reactrouter监听路由变化_前端路由三种模式
hash:任何情况下都可以做前端路由,缺点是SEO不友好(服务器收不到hash,浏览器是不会把#后面的内容发给服务器)history模式:后端将所有前端路由都渲染到同一个页面(不能是404页面),缺点是IE8以下不兼容。路由:分发请求hash模式#后面的就是hash举例:监听变化hash路由的简单例子codesandbox.io默认路由,用户没有设置#时404路由(保底路由)优化所有代码路由表d
·
hash:任何情况下都可以做前端路由,缺点是SEO不友好(服务器收不到hash,浏览器是不会把#后面的内容发给服务器)
history模式:后端将所有前端路由都渲染到同一个页面(不能是404页面),缺点是IE8以下不兼容。
路由:分发请求
hash模式
#后面的就是hash
举例:


监听变化

默认路由,用户没有设置#时

404路由(保底路由)


优化所有代码

路由表
div的对应关系是可以自定义的,做一个hash表,利用表驱动编程

container用来使用嵌套路由

history模式
number修改成从pathname里获取

#改成/

遍历所有的a标签阻止默认动作

路径在不刷新的情况下,改变url进行变更

监听并重新路由

memory模式
首先number不从路径里获取,从localStorage里获取


三者区别
hash和history都是把路径存在url上面,而memory模式路径没有放在url上而是在localStorage里,缺点是没有url是一个单机版的路由
更多推荐
所有评论(0)