面试题：Next.js Link组件结合动态路由在复杂业务场景下的导航策略与问题解决

Question

假设在一个电商Next.js应用中，商品列表页通过Link组件结合动态路由导航到商品详情页。但业务要求在某些特殊条件下（例如用户是新用户且来自特定推广渠道），导航到特殊的商品介绍引导页，之后再进入商品详情页。设计一个通用的导航策略来满足该需求，并说明在实现过程中可能遇到的技术难点及解决方案，同时给出关键代码逻辑。

Answer 1

通用导航策略设计

1. 判断条件：在导航触发时，检查用户是否为新用户且来自特定推广渠道。可以通过存储在本地存储、cookie 或者从后端获取相关标识来判断。
2. 导航逻辑：
   • 如果满足特殊条件，先导航到特殊的商品介绍引导页。
   • 在引导页完成引导后，再导航到商品详情页。
   • 如果不满足特殊条件，直接通过 Link 组件导航到商品详情页。

可能遇到的技术难点及解决方案

1. 用户标识获取：
   • 难点：准确获取用户是否为新用户及来自特定推广渠道的标识。
   • 解决方案：
     • 前端可以通过读取 cookie 或者本地存储来获取标识，例如 const isNewUser = localStorage.getItem('isNewUser') === 'true'; 以及 const fromSpecialChannel = localStorage.getItem('fromSpecialChannel') === 'true';
     • 也可以在用户登录或者页面加载时向后端发送请求获取这些标识，例如使用 fetch('/api/userInfo') 并在后端返回相关标识信息。
2. 引导页完成后的导航：
   • 难点：确保引导页完成引导后能正确导航到商品详情页，并传递正确的商品信息。
   • 解决方案：
     • 在引导页通过 useRouter 进行导航，并且在引导页传递商品的标识信息，例如 router.push({ pathname: '/productDetail', query: { productId: productId } });
     • 在商品详情页通过 useRouter 获取传递的参数，例如 const { productId } = useRouter().query;

关键代码逻辑

1. 商品列表页代码：

import Link from 'next/link';
import { useRouter } from 'next/router';
import React from'react';

const ProductList = () => {
  const router = useRouter();
  const isNewUser = localStorage.getItem('isNewUser') === 'true';
  const fromSpecialChannel = localStorage.getItem('fromSpecialChannel') === 'true';

  const handleNavigation = (productId) => {
    if (isNewUser && fromSpecialChannel) {
      router.push({ pathname: '/productGuide', query: { productId: productId } });
    } else {
      router.push({ pathname: '/productDetail', query: { productId: productId } });
    }
  };

  return (
    <div>
      {/* 假设这里有商品列表循环 */}
      <Link href="#" onClick={() => handleNavigation(1)}>
        商品 1
      </Link>
    </div>
  );
};

export default ProductList;

2. 引导页代码：

import { useRouter } from 'next/router';
import React from'react';

const ProductGuide = () => {
  const router = useRouter();
  const { productId } = router.query;

  const handleFinish = () => {
    router.push({ pathname: '/productDetail', query: { productId: productId } });
  };

  return (
    <div>
      <h1>商品介绍引导页</h1>
      {/* 引导内容 */}
      <button onClick={handleFinish}>完成引导</button>
    </div>
  );
};

export default ProductGuide;

3. 商品详情页代码：

import { useRouter } from 'next/router';
import React from'react';

const ProductDetail = () => {
  const router = useRouter();
  const { productId } = router.query;

  return (
    <div>
      <h1>商品详情页 - {productId}</h1>
      {/* 商品详情内容 */}
    </div>
  );
};

export default ProductDetail;