單擊右側路由頁面顯示中的側邊欄菜單時

Question

我有 sideNavbar，當單擊側邊欄菜單時，返回右側的菜單 comp.netns。

下面我提到了圖像看起來與 output 想要的一樣。

沙盒鏈接： https://m7tqt3.csb.app/

SideNavbar.js

---

import "./SideNavBar.css";

const SideNavBar = () => {
    
    const menuItems = [
        {
            text: "Dashboard",
            icon: "icons/grid.svg",
        },
        {
            text: "Admin Profile",
            icon: "icons/user.svg",
        },
        {
            text: "Messages",
            icon: "icons/message.svg",
        },
        {
            text: "Analytics",
            icon: "icons/pie-chart.svg",
        },
        {
            text: "File Manager",
            icon: "icons/folder.svg",
        },
        {
            text: "Orders",
            icon: "icons/shopping-cart.svg",
        },
        {
            text: "Saved Items",
            icon: "icons/heart.svg",
        },
        {
            text: "Settings",
            icon: "icons/settings.svg",
        },
    ];
    return (
        <div
            className={
                
                     "side-nav-container"
                    
            }
        >
            <div className="nav-upper">
                <div className="nav-heading">
                    (
                        <div className="nav-brand">
                            <img src="icons/Logo.svg" alt="" srcset="" />
                            <h2>Showkart</h2>
                        </div>
                    )
                    
                </div>
                <div className="nav-menu">
                    {menuItems.map(({ text, icon }) => (
                        <a
                            className={  "menu-item"}
                            href="#"
                        >
                            <img className="menu-item-icon" src={icon} alt="" srcset="" />
                            { <p>{text}</p>}
                        </a>
                    ))}
                </div>
            </div>
            
        </div>
    );
};

export default SideNavBar;

SideNavbar.css

/* NX = not expanded */

.side-nav-container {
    background-color: var(--dark);
    width: 300px;
    height: 100vh;
    position: relative;
    color: var(--light);

    transition: 0.4s;
}
.side-nav-container-NX {
    width: 85px;
}

.nav-upper,
.nav-heading,
.nav-menu,
.menu-item,
.nav-footer {
    /* border: 2px solid white; */
    display: grid;
}

.nav-heading {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr;
    height: 75px;
}

.nav-brand {
    display: flex;
    color: var(--light);
}
.nav-brand img {
    width: 40px;
    padding: 0 10px;
}

.hamburger {
    background: none;
    border: none;
    cursor: pointer;
    margin: auto;
}

.hamburger span {
    display: block;
    margin-top: 5px;
    background-color: var(--light);
    border-radius: 15px;
    height: 5px;
    width: 35px;

    transition: 0.4s;
}

.hamburger:hover span {
    background-color: var(--primary);
}

.hamburger-in:hover span:nth-child(1) {
    width: 25px;
    transform: translateY(4px) rotate(-25deg);
}
.hamburger-in:hover span:nth-child(2) {
    width: 40px;
}
.hamburger-in:hover span:nth-child(3) {
    width: 25px;
    transform: translateY(-4px) rotate(25deg);
}
/* ///////////////////// */
/* ///////////////////// */
/* ///////////////////// */
/* ///////////////////// */
.hamburger-out {
    margin-left: 24px;
}
.hamburger-out:hover span:nth-child(1) {
    width: 25px;
    transform: translate(14px, 4px) rotate(-155deg);
}
.hamburger-out:hover span:nth-child(2) {
    width: 40px;
}
.hamburger-out:hover span:nth-child(3) {
    width: 25px;
    transform: translate(14px, -4px) rotate(155deg);
}

.nav-menu {
    grid-template-rows: repeat(7, 1fr);
    margin-top: 50px;
}

.menu-item {
    height: 57px;
    display: flex;
    color: var(--light);
    text-decoration: none;
    text-transform: uppercase;
    margin: auto 20px;
    border-radius: 10px;
}

.menu-item-NX {
    margin: auto;
}
.menu-item:hover {
    background-color: var(--primary);
}
.menu-item img {
    width: 30px;
    padding: 0 20px;
}

.nav-footer {
    width: 100%;
    height: 87px;
    position: absolute;
    bottom: 0;
    grid-template-rows: 1fr;
    grid-template-columns: 2fr 1fr;
}

.nav-details {
    display: flex;
}
.nav-details img {
    width: 50px;
    padding: 0 20px;
}

.nav-footer-user-name {
    font-size: 18px;
    font-weight: 900;
}

.nav-footer-user-position {
    margin-top: -15px;
    color: var(--gray);
}
.logout-icon {
    width: 30px;
    margin: auto;
    border-radius: 90px;
    padding: 20px;
    margin-left: 5px;
}
.logout-icon:hover {
    background-color: var(--primary);
}

注意：React 路由器 dom 版本：5.3.1。

Output 看起來像：在此處輸入圖片描述

路由到右側的另一個組件

Answer 1

首先，如果我不理解你的問題，你需要一個側邊導航欄，它允許你使用你的 React 應用程序導航到不同的頁面。 如果是這樣的話：

 <div className="nav-menu">
                    {menuItems.map(({ text, icon }) => (
                        <a                  <--- The problem is here
                            className={  "menu-item"}
                            href="#"
                        >
                            <img className="menu-item-icon" src={icon} alt="" srcset="" />
                            { <p>{text}</p>}
                        </a>
                    ))}
                </div>

您正在使用錨標記，它將您重定向到 React 路由器之外。 您應該使用 Link 標簽，它允許重定向到您的 React 應用程序中的不同頁面。

 const menuItems = [
    {
        text: "Dashboard",
        icon: "icons/grid.svg",
        navLink:'/dashboard'
    },
    {
        text: "Admin Profile",
        icon: "icons/user.svg",
        navLink:'/admin'
    },...]



 <div className="nav-menu">
       {menuItems.map(({ text, icon, navlink }) => ( 
            <Link                
             className={  "menu-item"}
             to={navlink}
             >
                  <img className="menu-item-icon" src={icon} alt="" 
                   srcset="" 
                    />
                   { <p>{text}</p>}
             </Link>
            ))}
     </div>

同樣，您需要使用 BrowserRouter、Routes 和 Route 來加強您的 App.js 以在頁面之間移動。