router-router面试题整理

136 阅读1分钟
  1. React-Router怎么获取历史对象?
  • 包裹在route组件的compoent中他就会注入历史对象,或者用高阶组件去包裹withRouter
  1. React-Router怎么获取URL的参数?
  • match.params
  1. 在history模式中push和replace有什么区别?
  • push是记录历史记录的,history.pushState(null,'',path);
  • replace就是替换掉当前的记录
  1. React-Router怎么设置重定向?
  • 包裹在switch中使用redirect,设置from和to属性
  1. React-Router 4中Router组件有几种类型?

browserRouter和hashRouter

  1. React-Router的实现原理是什么? browserRouter的原理是,监听了window.onpopstate,和增强了histroy.pushState,在history发生改变的时候去改变context中的内容传递给子组件。然后利用Route正则匹配url路径,把历史对象注入到匹配的组件中。

hashRoueter的原理是,监听了window.addEventListener('hashchange',()=>{}), hash变化时候利用context中的内容传递给子组件。然后利用Route正则匹配url路径,把历史对象注入到匹配的组件中。

  1. React-Router 4的switch有什么用? 匹配到第一个路径就返回

  2. React-Router 4怎样在路由变化时重新渲染同一个组件?

可以在生命周期判断路由变化,做重新渲染的逻辑,比如说useEffect和componentdidUpdate

  1. React-Router的Link标签和a标签有什么区别?

Link标签主要加入了to的功能可以点击跳转到指定路由,实际上就是执行了,history.push方法

  1. React的路由和普通路由有什么区别?

静态路由是启动应用的时候把所有路由模块都加载进来动态路由是当你访问到这个页面,才把对应的组件加载