单击“ react-router-dom” v5时，在div内渲染另一个组件

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;

在我的app.js中

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