（三）【react-router v6】路由相关面试题，带你搞定前端面试

面试题

单页面跟多页面的区别

多页面实际上就是多个html，通过window.location互相跳转。

缺点： 每个页面跳转都要刷新，重新加载资源，性能会比较慢

好处： SEO友好，适合C端项目，隔离性好，每一个页面是一个独立的项目（每个项目可以由单独的团队负责）

单页面：

好处：在一个html中进行路由跳转，实际上是通过js去控制的。代表性的框架react/vue。

比较适合B端的项目，不考虑SEO。

页面跳转不用刷新，性能会好一些，用户体验也能好，可以实现代码复用。

缺陷： SEO不好

react-router 和 react-router-dom这个库的区别？

react-router-dom（浏览器专用）内部实际上依赖react-router这个库的。

BrowserRouter配置过程中有没有遇到过一些坑？

需要后台配合，否则会出现404的问题。

服务端使用：

1. 正则匹配
2. 通配符

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

路由跳转有几种方式

1. link标签
2. useNavigate

Router V6.4解决的核心问题？

它就是为解决瀑布流问题而生的。

可以实现，并行加载

1. 路由对应的UI页面 /app => App组件
2. 分包组件的js
3. 拉取组件或者页面所需要的数据

核心：并行加载资源

数据路由感觉写起来比较麻烦？30k+

1. 缺点：将数据耦合到UI中，增加了项目的耦合性，维护成本升高
2. 优点： 带来了直观的性能提升

这个世界上没有完美的解决方案。

推荐方案：

1. 传统路由模式，结合数据路由
   1. 性能没有问题的页面用传统模式（90%）
   2. 对性能要求比较高，可以考虑利用数据路由并行的方式优化（10%）

状态管理 redux redux-toolkit

手写react-redux