如何在动态路线上的nextjs应用程序中添加动态收藏图标

import React, { useState, useEffect } from 'react';

const FavoriteIcon = () => {
  const [isFavorite, setIsFavorite] = useState(false);

  useEffect(() => {
    // 从本地存储中读取收藏状态
    const favoriteStatus = localStorage.getItem('favoriteStatus');
    setIsFavorite(favoriteStatus === 'true');
  }, []);

  const toggleFavorite = () => {
    // 切换收藏状态
    const newFavoriteStatus = !isFavorite;
    setIsFavorite(newFavoriteStatus);
    // 将收藏状态存储在本地存储中
    localStorage.setItem('favoriteStatus', String(newFavoriteStatus));
  };

  return (
    <div>
      <button onClick={toggleFavorite}>
        {isFavorite ? '取消收藏' : '添加收藏'}
      </button>
      {/* 根据收藏状态来展示不同的图标样式 */}
      <span className={isFavorite ? 'favorite-icon' : 'non-favorite-icon'}></span>
    </div>
  );
};

export default FavoriteIcon;