如何在 React 中制作可重用的导航栏组件？

Question

最近在尝试做一个react网站。我的主页组件在下面。我的项目中有很多页面。我仍然是 reactjs 的新手。我需要知道，如何为此制作一个可重用的导航栏组件（也带有解析类名称）。我尝试了很多来制作具有许多来源的导航栏组件。任何帮助将不胜感激。

import React from 'react'

const Home = () => {
  return (
    <div>
      <nav id="main-nav" className="main-nav">
        <ul id="menu-primary-menu" className="menu">
          <li className="menu-item current-menu-item menu-item-has-children">
            <a href="/">Home</a>
            <ul className="sub-menu">
              <li className="menu-item current-item">
                <a href="/">Home 1</a>
              </li>
              <li className="menu-item">
                <a href="/home2">Home 2</a>
              </li>
              <li className="menu-item">
                <a href="/home3">Home 3</a>
              </li>
              <li className="menu-item">
                <a href="/home4">Home 4</a>
              </li>
              <li className="menu-item">
                <a href="/home5">Home 5</a>
              </li>
              <li className="menu-item">
                <a href="/home6">Home 6</a>
              </li>
              <li className="menu-item">
                <a href="/home7">Home 7</a>
              </li>
              <li className="menu-item">
                <a href="/home8">Home 8 ( Special )</a>
              </li>
              <li className="menu-item menu-item-has-children">
                <a href="#none">Slider Styles</a>
                <ul className="sub-menu">
                  <li className="menu-item">
                    <a href="slider-typer-text">Text Type</a>
                  </li>
                  <li className="menu-item">
                    <a href="slider-scroll-text">Text Scroll</a>
                  </li>
                  <li className="menu-item">
                    <a href="slider-rotate-text">Text Rotate</a>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
          <li className="menu-item menu-item-has-children">
            <a href="/">Explore</a>
            <ul className="sub-menu">
              <li className="menu-item">
                <a href="/explore1">Explore Style 1</a>
              </li>
              <li className="menu-item">
                <a href="/explore2">Explore Style 2</a>
              </li>
              <li className="menu-item">
                <a href="/explore3">Explore Style 3</a>
              </li>
              <li className="menu-item">
                <a href="/explore4">Explore Style 4</a>
              </li>
              <li className="menu-item">
                <a href="/auctions">Live Auctions</a>
              </li>
              <li className="menu-item">
                <a href="/item-details">Item Details</a>
              </li>
              <li className="menu-item">
                <a href="/item-details-2">Item Details 2</a>
              </li>
            </ul>
          </li>
          <li className="menu-item menu-item-has-children">
            <a href="/">Activity</a>
            <ul className="sub-menu">
              <li className="menu-item">
                <a href="/activity1">Activity 1</a>
              </li>
              <li className="menu-item">
                <a href="/activity2">Activity 2</a>
              </li>
            </ul>
          </li>
          <li className="menu-item menu-item-has-children">
            <a href="/">Community</a>
            <ul className="sub-menu">
              <li className="menu-item">
                <a href="/blog">Blog</a>
              </li>
              <li className="menu-item">
                <a href="/blog-details">Blog Details</a>
              </li>
              <li className="menu-item">
                <a href="/help-center">Help Center</a>
              </li>
            </ul>
          </li>
          <li className="menu-item menu-item-has-children">
            <a href="/">Pages</a>
            <ul className="sub-menu">
              <li className="menu-item">
                <a href="/author01">Authours</a>
              </li>
              <li className="menu-item">
                <a href="/author02">Authors 2</a>
              </li>
              <li className="menu-item">
                <a href="/connect-wallet">Wallet Connect</a>
              </li>
              <li className="menu-item">
                <a href="/create-item">Create Item</a>
              </li>
              <li className="menu-item">
                <a href="/profile">Edit Profile</a>
              </li>

              <li className="menu-item">
                <a href="/ranking">Ranking</a>
              </li>
              <li className="menu-item">
                <a href="/login">Login</a>
              </li>
              <li className="menu-item">
                <a href="/signup">Sign Up</a>
              </li>
              <li className="menu-item">
                <a href="/no-result">No Result</a>
              </li>
              <li className="menu-item">
                <a href="/faq">FAQ</a>
              </li>
            </ul>
          </li>
          <li className="menu-item  menu-item-has-children">
            <a href="/">Contact</a>
            <ul className="sub-menu">
              <li className="menu-item">
                <a href="/contact1">Contact 1</a>
              </li>
              <li className="menu-item">
                <a href="/contact2">Contact 2</a>
              </li>
            </ul>
          </li>
        </ul>
      </nav>
    </div>
  )
}

export default Nav

Answer 1

你找到解决方案了吗？