Как использовать отображение разных меню в зависимости от пути реагирующего маршрутизатора

Question

Я работаю над реактивным проектом. У меня есть домашняя страница сайта с панелью навигации по умолчанию, но я хочу, чтобы на панели мониторинга сайта была другая панель навигации, чем на других страницах сайта.

Я пытался создать 2 <Layout> components, который принимает детей и отображает разные Navbar. Затем я обертываю их своими компонентами в зависимости от того, какую навигационную панель я хочу показать. Но у реакции-роутера с этим проблема. Ниже приведен мой код:

<>
      <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>
    </>

Код для компонента Layout:

import React from 'react';

// components
import Navbar from './Navbar'

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

}

export default Layout;

Код для компонента Layout панели мониторинга:

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

Когда я перемещаюськ маршруту localhost:3000/admin/dashboard все работает нормально, включая весь маршрут по /admin/dashboard/*, проблема в том, что когда я перехожу на localhost:3000, он все еще показывает панель инструментов.

Я знаю, что есть способ реализовать это. Но, будучи моим первым разом, я испытываю трудности с его правильной реализацией.