Next.js动态路由选中技巧分享

本文深入探讨了在 Next.js 应用中，如何巧妙地根据当前路由动态设置侧边栏的默认选中项，从而提升用户体验。针对常见的两种实现方式，即利用 `useState` 和 `useEffect` 组合更新状态，以及直接在 `useState` 初始化时计算默认值，文章进行了细致的对比分析，揭示了各自的优缺点。特别指出第一种方法可能导致页面闪烁，影响用户体验。因此，文章强烈推荐采用函数式更新 `useState` 的方式，避免闪烁问题，并强调了提供默认值和正确设置依赖项的重要性。通过本文，开发者可以掌握 Next.js 动态路由侧边栏选中的最佳实践，打造更流畅、用户友好的 Web 应用。

在 Next.js 应用中，如何根据当前路由动态设置侧边栏默认选中项的最佳实践。针对使用 useState 和 useEffect 组合，以及直接在 useState 初始化时计算默认值两种方法，分析了各自的优缺点，并推荐使用函数式更新 useState 的方式，以避免页面闪烁问题，确保用户体验。

在构建具有侧边栏导航的 Next.js 应用时，一个常见的需求是根据当前路由高亮显示对应的菜单项，尤其是在页面刷新时，需要保持选中状态的正确性。 通常，我们会使用 useState 来管理侧边栏的选中项，并根据当前路由进行更新。 以下将讨论两种实现方式，并分析它们的优缺点，最终给出推荐的最佳实践。

方法一：使用 useEffect 更新状态

这种方法首先使用一个初始值初始化 selectedMenuItem 状态，然后在 useEffect 中根据当前路由计算并更新状态。

import { useState, useEffect } from 'react';
import { useRouter } from 'next/router';

function Sidebar({ items }) {
  const [selectedMenuItem, setSelectedMenuItem] = useState('defaultKey'); // 初始值

  const router = useRouter();

  useEffect(() => {
    const item = items.find((item) => item.route === router.pathname);
    if (item) {
      setSelectedMenuItem(item.key);
    }
  }, [router.pathname, items]); // 依赖项包含 router.pathname 和 items

  return (
    <ul>
      {items.map((item) => (
        <li key={item.key} className={item.key === selectedMenuItem ? 'active' : ''}>
          {item.label}
        </li>
      ))}
    </ul>
  );
}

export default Sidebar;

这种方法的主要缺点是：useEffect 中的代码会在组件首次渲染后执行，这意味着 selectedMenuItem 会先被设置为初始值，然后在第二次渲染时才会被更新为正确的值。 这会导致在页面加载时出现闪烁，用户体验不佳。

方法二：在 useState 初始化时计算默认值

这种方法直接在 useState 的初始化函数中计算 selectedMenuItem 的默认值。

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

function Sidebar({ items }) {
  const router = useRouter();

  const [selectedMenuItem, setSelectedMenuItem] = useState(() => {
    const item = items.find((item) => item.route === router.pathname);
    return item ? item.key : 'defaultKey'; // 提供默认值，避免 undefined
  });

  return (
    <ul>
      {items.map((item) => (
        <li key={item.key} className={item.key === selectedMenuItem ? 'active' : ''}>
          {item.label}
        </li>
      ))}
    </ul>
  );
}

export default Sidebar;

这种方法使用函数作为 useState 的参数。 该函数只会在组件首次渲染时执行一次，并且其返回值将作为 selectedMenuItem 的初始值。 这样可以避免页面闪烁的问题，因为 selectedMenuItem 在第一次渲染时就已经被设置为正确的值。

最佳实践：使用函数式更新 useState

推荐使用第二种方法，即在 useState 初始化时计算默认值。 这种方法可以避免页面闪烁的问题，并且代码更简洁。

注意事项

• 提供默认值： 确保在 items.find 没有找到匹配项时，提供一个默认的 selectedMenuItem 值，避免出现 undefined 错误。
• 依赖项： useEffect 方法中，要确保 useEffect 的依赖项包含了所有可能导致 selectedMenuItem 发生变化的值，例如 router.pathname 和 items。
• 性能优化： 如果 items 是一个很大的数组，并且 items.find 的计算成本很高，可以考虑使用 useMemo 来缓存计算结果，以提高性能。

总结

在 Next.js 应用中，根据当前路由动态设置侧边栏默认选中项的最佳实践是使用函数式更新 useState 的方式。 这种方法可以避免页面闪烁的问题，并提供更好的用户体验。 记住，始终要考虑提供默认值，并确保 useEffect 的依赖项正确，以避免潜在的错误。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《Next.js动态路由选中技巧分享》文章吧，也可关注golang学习网公众号了解相关技术文章。