routing and links

المشكلة انك تنقر على الـ after عند النقر على الزر بدلاً من ان تنقر على الرابط وذلك لأن الـ after تقع امام الزر.

ولحل المشكلة يمكنك تعديل الكود للشكل :

<nav>
  <ul>
    <a className="home-icon" href='#home' >
      <li>
        <FontAwesomeIcon icon={faHouse} className='icon' />
      </li>
    </a>
    <a className="about-icon" href='#about' >
      <li>
        <FontAwesomeIcon icon={faFileContract} className='icon' />
      </li>
    </a>
    <a className="projects" href="/" >
      <li>
        <FontAwesomeIcon icon={faAddressCard} className='icon' />
      </li>
    </a>
    <a className="comments" href="/" >
      <li>
        <FontAwesomeIcon icon={faComments} className='icon' />
      </li>
    </a>
  </ul>
</nav>

أو ان تقوم بعملية التنقل عبر js :

<nav>
  <ul>
    <li onClick={() => window.location.replace("#home")}>
      <a className="home-icon" href='#' >
        <FontAwesomeIcon icon={faHouse} className='icon' />
      </a>
    </li>
    <li onClick={() => window.location.replace("#about")}>
      <a className="about-icon" href='#' >
        <FontAwesomeIcon icon={faFileContract} className='icon' />
      </a>
    </li>
    <li>
      <a className="projects" href="/" >
        <FontAwesomeIcon icon={faAddressCard} className='icon' />
      </a>
    </li>
    <li>
      <a className="comments" href="/" >
        <FontAwesomeIcon icon={faComments} className='icon' />
      </a>
    </li>
  </ul>
</nav>