Определение маршрутов в отдельном компоненте — React

import React, { Component } from "react";
import { Route, Switch } from "react-router-dom";
import Home from "./Home";
import AdminLogin from "./Admin/Login/index";
import { PrivateRoute } from "../Shared/PrivateRoute";
import Dashboard from "./Admin/Dashboard";

export default class Routes extends Component {
  render() {
    return (
      <Switch>
        <Route path = "/" exact = {true} component = {Home} />
        <Route path = "/auth/adminlogin" exact = {true} component = {AdminLogin} />
        <PrivateRoute
          path = "/admin/dashboard"
          exact = {true}
          component = {Dashboard}
        />
      </Switch>
    );
  }
}

import React, { Component } from "react";
import "./App.css";
import Navbar from "./Components/Navbar";
import Routes from "./Components/Pages/Routes";
import { AuthProvider } from "./Context/AuthContext";

const styles = {
  noPadding: {
    padding: "0"
  }
};
class App extends Component {
  render() {
    return (
      <AuthProvider>
        <React.Fragment>
          <Navbar />
          <div className = "container-fluid" style = {styles.noPadding}>
            <Routes />
          </div>
        </React.Fragment>
      </AuthProvider>
    );
  }
}

export default App;

import React, { Component } from "react";
import DashboardSidebar from "./DashboardSidebar";
import DashboardRoutes from "./DashboardRoutes";
class Dashboard extends Component {
  state = {};
  render() {
    return (
      <div>
        <div className = "row">
          <div className = "col-md-2">
            <DashboardSidebar />
          </div>
          <div className = "col-md-10">
            <DashboardRoutes />
          </div>
        </div>
      </div>
    );
  }
}

export default Dashboard;

import React, { Component } from "react";
import MyImages from "./MyImages/index";
import { Switch } from "react-router-dom";
import { PrivateRoute } from "../../../Shared/PrivateRoute";
import Orders from "./Orders";
import Reviews from "./Reviews/index";
class DashboardRoutes extends Component {
  state = {};
  render() {
    return (
      <div>
        <Switch>
          <PrivateRoute
            path = "/admin/dashboard"
            exact = {true}
            component = {MyImages}
          />
          <PrivateRoute
            path = "/admin/dashboard/orders"
            exact = {true}
            component = {Orders}
          />
          <PrivateRoute
            path = "/admin/dashboard/reviews"
            exact = {true}
            component = {Reviews}
          />
        </Switch>
      </div>
    );
  }
}

export default DashboardRoutes;