面试题
单页面跟多页面的区别
多页面实际上就是多个html,通过window.location互相跳转。
缺点: 每个页面跳转都要刷新,重新加载资源,性能会比较慢
好处: SEO友好,适合C端项目,隔离性好,每一个页面是一个独立的项目(每个项目可以由单独的团队负责)
单页面:
好处:在一个html中进行路由跳转,实际上是通过js去控制的。代表性的框架react/vue。
比较适合B端的项目,不考虑SEO。
页面跳转不用刷新,性能会好一些,用户体验也能好,可以实现代码复用。
缺陷: SEO不好
react-router 和 react-router-dom这个库的区别?
react-router-dom(浏览器专用)内部实际上依赖react-router这个库的。
BrowserRouter配置过程中有没有遇到过一些坑?
需要后台配合,否则会出现404的问题。
服务端使用:
- 正则匹配
- 通配符
router有几种路由模式?
5种,详情见课件
如果我需要给页面跳转的时候传递一些状态可以怎么办?
import { Outlet, useNavigate } from "react-router-dom"
function Layout () {
const navigate = useNavigate()
console.log('navigate',navigate )
return (
<div>
<h1>我是通用的头部</h1>
<button onClick={() => navigate('/app')}>跳转到App</button>
<button onClick={() => navigate('/bpp', {
state: {
user_id: 'james',
from: 'layout'
}
})}>跳转到bpp</button>
<Outlet />
</div>
)
}
export default Layout
路由跳转有几种方式
- link标签
- useNavigate
Router V6.4解决的核心问题?
它就是为解决瀑布流问题而生的。
可以实现,并行加载
- 路由对应的UI页面 /app => App组件
- 分包组件的js
- 拉取组件或者页面所需要的数据
核心:并行加载资源
数据路由感觉写起来比较麻烦?30k+
- 缺点:将数据耦合到UI中,增加了项目的耦合性,维护成本升高
- 优点: 带来了直观的性能提升
这个世界上没有完美的解决方案。
推荐方案:
- 传统路由模式,结合数据路由
- 性能没有问题的页面用传统模式(90%)
- 对性能要求比较高,可以考虑利用数据路由并行的方式优化(10%)