Javascript 如何使用根据不同路径显示不同菜单

我正在做一个react项目，我有一个带有默认导航栏的站点主页，但我希望站点仪表板有一个与站点其他页面不同的导航栏

我已经尝试创建了2个

组件

，它们包含子项并显示不同的导航栏。然后根据要显示的导航栏，使用它们包装组件。但react路由器在这方面有问题。下面是我的代码：

<>
      <Switch>

        <Route exact path="/admin/login" component={ Login } />

        <Dashboard>
          <Route exact path="/admin/dashboard/" component={ DashboardHome } />
          <Route exact path="/admin/dashboard/about" component={ AboutForm } />
          <Route exact path="/admin/dashboard/properties" component={ Allproperties } />
          <Route exact path="/admin/dashboard/contact" component={ ContactFrom } />
          <Route exact path="/admin/dashboard/newproperty" component={ Newproperty } />
          {/* <Route exact path="/admin/dashboard/messages" component={ Messages } /> */}
        </Dashboard>

        <Layout>
          <Route exact path="/" component={ Home } /> 
          <Route exact path="/properties/" component={ Properties } />
          <Route exact path="/services/" component={ Services } />
          <Route exact path="/contact/" component={ ContactMe } />
          <Route exact path="/property/:slug" component={ SingleProperty } />
          <Route component={ Errors } />
        </Layout>

      </Switch>
    </>

{/*  */}

布局组件的代码：

import React from 'react';

// components
import Navbar from './Navbar'

const Layout = ({children}) => {
    return (
        <>
            <Navbar />
            {children}
        </>
    );

}

export default Layout;

从“React”导入React；
//组成部分
从“/Navbar”导入导航栏
常量布局=（{children}）=>{
返回(
{儿童}
);
}
导出默认布局；

仪表板布局组件的代码：

import React, { Component } from 'react'
import { Link } from 'react-router-dom'

// style
import './Dashboard.css'

// components
import DashboardNav from '../components/DashboardNav'

const Dashboard = ({ children }) => {

    return (
        <section className="">
            <div className="row">
                <div id="main" className="col-sm-12 d-flex">
                    <aside id="sidebar" className="dashboard col-md-2 bg-secondary">
                        <ul className="nav flex-column justify-content-center align-items-center">
                            <li className="nav-item py-md-4 px-md-3">
                                <Link className="nav-link active text-white" to="#">Logo</Link>
                            </li>
                            <li className="nav-item p-md-3">
                                <Link className="nav-link active text-white" to="#">Dashboard</Link>
                            </li>
                            <li className="nav-item p-md-3">
                                <Link className="nav-link text-white" to="#">All Properties</Link>
                            </li>
                            <li className="nav-item p-md-3">
                                <Link className="nav-link text-white" to="#">New Properties</Link>
                            </li>
                            <li className="nav-item p-md-3">
                                <Link className="nav-link text-white" to="#">Messages</Link>
                            </li>
                            <li className="nav-item p-md-3">
                                <Link className="nav-link text-white" to="#">About</Link>
                            </li>
                            <li className="nav-item p-md-3">
                                <Link className="nav-link text-white" to="#">Contact</Link>
                            </li>
                            <li className="nav-item p-md-3">
                                <Link className="nav-link text-white" to="#">Blog</Link>
                            </li>
                            <li className="nav-item p-md-3">
                                <Link className="nav-link text-white" to="#">Logout</Link>
                            </li>
                        </ul>
                    </aside>

                    <article id="dashboard" className="col-sm-12 col-md-10">
                        <header id="menu" className="dashboard d-flex flex-column">
                            <DashboardNav />
                        </header>

                        <main className="py-md-3">

                            {/* { loading && <Loading /> } */}
                            { children }

                        </main>
                    </article>                        
                </div>
            </div>
        </section>
    )

}

export default Dashboard

import React，{Component}来自“React”
从“react router dom”导入{Link}
//风格
导入“./Dashboard.css”
//组成部分
从“../components/DashboardNav”导入DashboardNav
const Dashboard=（{children}）=>{
返回(


标志


仪表板


所有属性


新特性


信息


关于


接触


博客


注销


{/*{加载&}*/}
{儿童}
)
}
导出默认仪表板

当我导航到路径

localhost:3000/admin/dashboard

时，一切正常，包括沿着

/admin/dashboard/*

的所有路径，问题是当我导航到

localhost:3000

时，它仍然显示仪表板

---

我知道有办法实现这一点。但是，作为我的第一次，我很难正确地实现它。

即使在localhost:3000/上也能看到仪表板菜单的原因是，仪表板组件实际上是在该页面上呈现的。当然，

Dashboard

组件内的内容组件（包括

DashboardHome

和

AboutForm

）不会显示在该页面上，但仪表板菜单不会用react router包装

请尝试以这种方式更新您的组件

主路由器：

<>
   <Switch>
       <Route exact path="/admin/login" component={ Login } />
       <Route path="/admin" component={ Dashboard } />
       <Route path="/" component={ Layout } />
   </Switch>
</>

仪表板：

import React, { Component } from 'react'
import { Link } from 'react-router-dom'

// style
import './Dashboard.css'

// components
import DashboardNav from '../components/DashboardNav'

const Dashboard = ({ children }) => {

    return (
        <section className="">
            <div className="row">
                <div id="main" className="col-sm-12 d-flex">
                    <aside id="sidebar" className="dashboard col-md-2 bg-secondary">
                        <ul className="nav flex-column justify-content-center align-items-center">
                            <li className="nav-item py-md-4 px-md-3">
                                <Link className="nav-link active text-white" to="#">Logo</Link>
                            </li>
                            <li className="nav-item p-md-3">
                                <Link className="nav-link active text-white" to="#">Dashboard</Link>
                            </li>
                            <li className="nav-item p-md-3">
                                <Link className="nav-link text-white" to="#">All Properties</Link>
                            </li>
                            <li className="nav-item p-md-3">
                                <Link className="nav-link text-white" to="#">New Properties</Link>
                            </li>
                            <li className="nav-item p-md-3">
                                <Link className="nav-link text-white" to="#">Messages</Link>
                            </li>
                            <li className="nav-item p-md-3">
                                <Link className="nav-link text-white" to="#">About</Link>
                            </li>
                            <li className="nav-item p-md-3">
                                <Link className="nav-link text-white" to="#">Contact</Link>
                            </li>
                            <li className="nav-item p-md-3">
                                <Link className="nav-link text-white" to="#">Blog</Link>
                            </li>
                            <li className="nav-item p-md-3">
                                <Link className="nav-link text-white" to="#">Logout</Link>
                            </li>
                        </ul>
                    </aside>

                    <article id="dashboard" className="col-sm-12 col-md-10">
                        <header id="menu" className="dashboard d-flex flex-column">
                            <DashboardNav />
                        </header>

                        <main className="py-md-3">

                            {/* { loading && <Loading /> } */}
                            <Switch>
                                <Route exact path="/admin/dashboard/" component={ DashboardHome } />
                                <Route exact path="/admin/dashboard/about" component={ AboutForm } />
                                <Route exact path="/admin/dashboard/properties" component={ Allproperties } />
                                <Route exact path="/admin/dashboard/contact" component={ ContactFrom } />
                                <Route exact path="/admin/dashboard/newproperty" component={ Newproperty } />
                                {/* <Route exact path="/admin/dashboard/messages" component={ Messages } /> */}
                            </Switch>

                        </main>
                    </article>                        
                </div>
            </div>
        </section>
    )

}

export default Dashboard

import React，{Component}来自“React”
从“react router dom”导入{Link}
//风格
导入“./Dashboard.css”
//组成部分
从“../components/DashboardNav”导入DashboardNav
const Dashboard=（{children}）=>{
返回(


标志


仪表板


所有属性


新特性


信息


关于


接触


博客


注销


{/*{加载&}*/}
import React from 'react';

// components
import Navbar from './Navbar'

const Layout = ({children}) => {
    return (
        <>
            <Navbar />
            <Switch>
               <Route exact path="/" component={ Home } /> 
               <Route exact path="/properties/" component={ Properties } />
               <Route exact path="/services/" component={ Services } />
               <Route exact path="/contact/" component={ ContactMe } />
               <Route exact path="/property/:slug" component={ SingleProperty } />
               <Route component={ Errors } />
            </Switch>
        </>
    );

}

export default Layout;