Last active
May 2, 2020 07:26
-
-
Save JonahTurnquist/5fa8d95fb099d645b791ec023c2b65c1 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | |
); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment