خطأ حاصل نتيجة سوء توظيف Link (React-Router-Dom)

الخطأ الذي تواجهه ناتج عن وجود عنصر <a> داخل عنصر آخر <a>. في الكود لديك، يتم استخدام NavLink كعنصر أب ويحتوي داخله على عنصر <Dropdown> والذي يحتوي بدوره على عنصر <Link>. هذا ما يسبب الخطأ لأن NavLink يستخدم عنصر <a> في هيكله الداخلي.

لحل هذه المشكلة، يمكنك تعديل هيكل الكود بحيث لا يحتوي NavLink على عناصر <a> أخرى بداخله. يمكن فعل ذلك عن طريق وضع محتوى الـ Dropdown خارج الـ NavLink، ثم استخدام أسلوب آخر لعرض القائمة المنسدلة. على سبيل المثال:

import React, { useState } from "react";
import "./header.css";
import { Link, NavLink } from "react-router-dom";
import { CiMenuBurger } from "react-icons/ci";
import { RiCloseFill } from "react-icons/ri";
import logo from "../../images/logo.png";
import { useSelector } from "react-redux";
import { BsThreeDotsVertical } from "react-icons/bs";
import Dropdown from "./Dropdown";

function Header() {
  const [click, setClick] = useState(false);
  const [dropdown, setDropdown] = useState(false);

  const { user } = useSelector((state) => state.auth);

  const handleClick = () => setClick(!click);

  return (
    <>
      <nav className="navbar">
        <div className="nav-container">
          <Link to="/" className="nav-logo">
            <div className="logo">
              <img src={logo} alt="logo" />
            </div>
            <span className="logo-icon">Bookly</span>
          </Link>

          <ul className={click ? "nav-menu active" : "nav-menu"}>
            {user ? (
              <>
                <li className="nav-item">
                  <NavLink
                    to="/"
                    className={({ isActive }) =>
                      isActive ? "active" : "nav-links"
                    }
                    onClick={handleClick}
                  >
                    Home
                  </NavLink>
                </li>
                {user.isAdmin && (
                  <li className="nav-item">
                    <NavLink
                      to="/admin"
                      className={({ isActive }) =>
                        isActive ? "active" : "nav-links"
                      }
                      onClick={handleClick}
                    >
                      Dashboard
                    </NavLink>
                  </li>
                )}
                <li className="nav-item">
                  <span
                    className="nav-links nav-dropdown"
                    onClick={() => setDropdown(!dropdown)}
                  >
                    {user.name}
                    <BsThreeDotsVertical />
                  </span>
                  {dropdown && <Dropdown />}
                </li>
              </>
            ) : (
              <>
                <li className="nav-item">
                  <NavLink
                    to="/"
                    className={({ isActive }) =>
                      isActive ? "active" : "nav-links"
                    }
                    onClick={handleClick}
                  >
                    Home
                  </NavLink>
                </li>
                <li className="nav-item">
                  <NavLink
                    to="/login"
                    className={({ isActive }) =>
                      isActive ? "active" : "nav-links"
                    }
                    onClick={handleClick}
                  >
                    Login
                  </NavLink>
                </li>
              </>
            )}
          </ul>
          <div className="nav-icon" onClick={handleClick}>
            {click ? (
              <span className="icon">
                <RiCloseFill />
              </span>
            ) : (
              <span className="icon">
                <CiMenuBurger />
              </span>
            )}
          </div>
        </div>
      </nav>
    </>
  );
}

export default Header;

وفي مكون Dropdown، تأكد من أن الروابط لا تستخدم عناصر <a> داخل عناصر أخرى من نفس النوع:

import React from 'react'
import { useDispatch } from 'react-redux'
import { logoutUser } from '../../redux/apiCalls/authApiCalls'
import { Link } from 'react-router-dom'

function Dropdown() {
    const dispatch = useDispatch()

    const logout = () => {
        dispatch(logoutUser())
    }
  return (
    <div className='dropdown'>
        <ul className="dropdown-menu">
            <li className="dropdown-item" onClick={logout}>
                Logout
            </li>
            <li className="dropdown-item">
                <Link className='dropdown-item-link' to='/favorites'>
                My Favorites
                </Link>  
            </li>
        </ul>
    </div>
  )
}

export default Dropdown

بهذه الطريقة، تتجنب وجود عنصر <a> داخل عنصر آخر، مما يحل الخطأ الذي يظهر لك