2021前端react高频面试题汇总

2022前端react高频面试题汇总

React视频讲解 点击学习

1. React-Router的实现原理是什么？

客户端路由实现的思想：

• 基于 hash 的路由：通过监听

  hashchange
  

  事件，感知 hash 的变化

  • 改变 hash 可以直接通过 location.hash=xxx

• 基于 H5 history 路由：

  • 改变 url 可以通过 history.pushState 和 resplaceState 等，会将URL压入堆栈，同时能够应用 history.go() 等 API
  • 监听 url 的变化可以通过自定义事件触发实现

react-router 实现的思想：

• 基于 history 库来实现上述不同的客户端路由实现思想，并且能够保存历史记录等，磨平浏览器差异，上层无感知
• 通过维护的列表，在每次 URL 发生变化的回收，通过配置的 路由路径，匹配到对应的 Component，并且 render

2. 如何配置 React-Router 实现路由切换

（1）使用 组件

路由匹配是通过比较 的 path 属性和当前地址的 pathname 来实现的。当一个 匹配成功时，它将渲染其内容，当它不匹配时就会渲染 null。没有路径的 将始终被匹配。

// when location = { pathname: '/about' }
<Route path='/about' component={About}/> // renders 
<Route path='/contact' component={Contact}/> // renders null
<Route component={Always}/> // renders 
复制代码

（2）结合使用 组件和 组件

用于将 分组。

<Switch><Route exact path="/" component={Home} /><Route path

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！