nested home

src/Home.js

@@ -18,6 +18,15 @@ import ListItemText from '@material-ui/core/ListItemText';
 import InboxIcon from '@material-ui/icons/MoveToInbox';
 import MailIcon from '@material-ui/icons/Mail';
 
+import {
+    BrowserRouter as Router,
+    Switch,
+    Route,
+    Link,
+    useParams,
+    useRouteMatch
+  } from "react-router-dom";
+
 const drawerWidth = 240;
 
 const useStyles = makeStyles((theme) => ({
@@ -95,6 +104,8 @@ export default function MiniDrawer() {
     setOpen(false);
   };
 
+  let { path, url } = useRouteMatch();
+
   return (
     <div className={classes.root}>
       <CssBaseline />
@@ -160,30 +171,42 @@ export default function MiniDrawer() {
       </Drawer>
       <main className={classes.content}>
         <div className={classes.toolbar} />
-        <Typography paragraph>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
-          ut labore et dolore magna aliqua. Rhoncus dolor purus non enim praesent elementum
-          facilisis leo vel. Risus at ultrices mi tempus imperdiet. Semper risus in hendrerit
-          gravida rutrum quisque non tellus. Convallis convallis tellus id interdum velit laoreet id
-          donec ultrices. Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit
-          adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra nibh cras.
-          Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo quis
-          imperdiet massa tincidunt. Cras tincidunt lobortis feugiat vivamus at augue. At augue eget
-          arcu dictum varius duis at consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem
-          donec massa sapien faucibus et molestie ac.
-        </Typography>
-        <Typography paragraph>
-          Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper eget nulla
-          facilisi etiam dignissim diam. Pulvinar elementum integer enim neque volutpat ac
-          tincidunt. Ornare suspendisse sed nisi lacus sed viverra tellus. Purus sit amet volutpat
-          consequat mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis risus sed
-          vulputate odio. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in. In
-          hendrerit gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem et
-          tortor. Habitant morbi tristique senectus et. Adipiscing elit duis tristique sollicitudin
-          nibh sit. Ornare aenean euismod elementum nisi quis eleifend. Commodo viverra maecenas
-          accumsan lacus vel facilisis. Nulla posuere sollicitudin aliquam ultrices sagittis orci a.
-        </Typography>
+        <h2>Topics</h2>
+        <ul>
+            <li>
+            <Link to={`${url}/rendering`}>Rendering with React</Link>
+            </li>
+            <li>
+            <Link to={`${url}/components`}>Components</Link>
+            </li>
+            <li>
+            <Link to={`${url}/props-v-state`}>Props v. State</Link>
+            </li>
+        </ul>
+
+        <Switch>
+            <Route exact path={path}>
+                <h3>Please select a topic.</h3>
+            </Route>
+            <Route path={`${path}/:topicId`}>
+                <Topic />
+            </Route>
+        </Switch>
       </main>
     </div>
   );
 }
+
+function Topic() {
+    // The <Route> that rendered this component has a
+    // path of `/topics/:topicId`. The `:topicId` portion
+    // of the URL indicates a placeholder that we can
+    // get from `useParams()`.
+    let { topicId } = useParams();
+  
+    return (
+      <div>
+        <h3>{topicId}</h3>
+      </div>
+    );
+  }
\ No newline at end of file

src/router/index.js

@@ -44,11 +44,11 @@ export default function BasicExample() {
         */}
         <Switch>
           <Route exact path="/">
-            <Home />
-          </Route>
-          <Route path="/login">
             <Login />
           </Route>
+          <Route path="/home">
+            <Home />
+          </Route>
           <Route path="/register">
             <Register />
           </Route>