react-router-nested-routes.jsx

import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

// Layout
const BackendLayout = ({ children }) => (
  <div>
    <header>This is the admin backend!</header>
    <section>{children}</section>
  </div>
);

// Pages
const ViewUsersPage = () => <>This is a backend page</>;
const ViewBlogpostsPage = () => <>This is another backend page</>;

// Routes
export default function App() {
  return (
    <Router>
      <Switch>
        <Route
          path="/backend"
          render={({ match }) => <BackendRoutes basePath={match.path} />}
        />
        {/* ... additional top-level routes using other layouts ... */}
      </Switch>
    </Router>
  );
}



// Nested backend routes
const BackendRoutes = ({ basePath, username }) => (
  <BackendLayout username={username}>
    <Route path={`${basePath}/users`} component={ViewUsersPage} />
    <Route path={`${basePath}/blogposts`} component={ViewBlogpostsPage} />
    {/* ... additional routes under /backend ... */}
  </BackendLayout>
);