Рендеринг другого компонента внутри div при щелчке по ссылке «act-router-dom »v5

Question

Я пытаюсь отобразить компонент внутри компонента панели мониторинга, щелкнув ссылку в этом компоненте, мне нужно отобразить компонент «Домой» или «Контакты» или «О компоненте» внутри элемента div, если я должен использовать массив для хранения компонентов, которые требуется визуализировать или направить ? и как мне это сделать?

import React, { useContext, useEffect, useState, Fragment } from "react";
import { BrowserRouter as Router, Route, Switch, Link } from "react-router-dom";
import Home from "./Home";
import About from "./About";
import Contacts from "./Contacts";

const DashBoard = () => {
  const authContext = useContext(AuthContext);
  return (
    <div>
        <div> // this is my side nav
          <Route>
              <ul>
                <li>
                  <Link to="/dashboard/home">Home</Link>
                </li>
                <li>
                  <Link to="/">Issues</Link>
                </li>
                <li>
                  <Link to="/">Contacts</Link>
                </li>
                <li>
                  <Link to="/dashBoard/about">About</Link>
                </li>
              </ul>
          </Route>
      </div>

      <div>
        <nav>
          <button
            className="btn btn-primary"
            id="menu-toggle"
            onClick={() => setIsToggled(!isToggled)}
          >
            Toggle Menu
          </button>
        </nav>

        <div className="container-fluid">
        // i need to render a component here ex.) <Home/> | <Contacts/> | <About/> when a Link is clicked!
        </div>

      </div>
    </div>
  );
};

export default DashBoard;

в моем приложении. js

<Fragment>
  <Navbar />
    <div className="">
        <Switch>
            <Route exact path="/dashBoard" component={DashBoard} />
            <Route exact path="/login" component={Login} />
        </Switch>
    </div>
</Fragment>