我有两个组件，App 和 Dashboard

App Component是主要组件，在App内部，有一个切换到我需要嵌套路由的仪表板组件，在仪表板组件内部，我需要有“/dashboard/blogs”来切换它里面的博客组件。这里我分享两个组件，

import React, { Component } from "react";
import {BrowserRouter as Router, Route, Switch} from "react-router-dom";
import Signup from "./pages/Signup";
import Login from "./pages/Login";
import Home from "./pages/Home";
import Dashboard from "./dashboard/Dashboard";

class App extends Component {
  render() {
    return (
        <div id="content-wrapper">
          <Router>
            <Switch>
              <Route exact path="/signup" component={Signup}/>
              <Route exact path="/login" component={Login}/>
              <Route exact path="/" component={Home}/>
              <Route exact path="/dashboard" component={Dashboard}/>
            </Switch>
          </Router>
        </div>
    );
  }
}

export default App;

import React, {Component} from 'react';
import Navbar from "./Navbar";
import SideBar from "./SideBar";
import "../scripts/dashboard";
import {BlogList} from "./components/BlogList";
import {BrowserRouter as Router, Route, Switch} from "react-router-dom";
import {DashBoardHome} from "./components/DashBoardHome";
class Dashboard extends Component {
 
render()
{
  return (
    <div id="wrapper">
      <SideBar/>
      <div id="content-wrapper" className="d-flex flex-column">
        <div id="content">
          <Navbar/>
          <div className="container-fluid">
            <Router>
            <Switch>
              <Route path={`${this.props.match.url}/blogs`} exact={true} component={BlogList} /> //This is not working?
              </Switch>
            </Router>
          </div>
        </div>
      </div>
    </div>
  )
}
}
export default Dashboard;

提前致谢！