apdet

src/container/Home.js

@@ -163,7 +163,7 @@ export default function MiniDrawer() {
         <List>
           {['All mail', 'Trash', 'Spam'].map((text, index) => (
             <ListItem button key={text}>
-              <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
+              <ListItemIcon>{index % 2 === 0 ? <Link to={`${url}/rendering`}><InboxIcon /></Link> : <Link to={`${url}/components`}><MailIcon /></Link>}</ListItemIcon>
               <ListItemText primary={text} />
             </ListItem>
           ))}
@@ -171,27 +171,17 @@ export default function MiniDrawer() {
       </Drawer>
       <main className={classes.content}>
         <div className={classes.toolbar} />
-        <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 />
+              <Topic />
             </Route>
         </Switch>
+        <div style={{height: 100, width: '100%', backgroundColor: 'red', justifyContent:'flex-end'}}>
+
+        </div>
       </main>
     </div>
   );
@@ -203,7 +193,9 @@ function Topic() {
     // of the URL indicates a placeholder that we can
     // get from `useParams()`.
     let { topicId } = useParams();
-  
+    React.useEffect(() => {
+      alert(topicId)
+    })
     return (
       <div>
         <h3>{topicId}</h3>