Enabling home button clickable feature

simplq/src/components/Layout.jsx

@@ -5,6 +5,8 @@ import Typography from '@material-ui/core/Typography';
 import { makeStyles } from '@material-ui/core/styles';
 import Link from '@material-ui/core/Link';
 import Routes from './Routes'
+import Button from '@material-ui/core/Button';
+import { withRouter } from "react-router";
 
 function Copyright() {
   return (
@@ -26,15 +28,21 @@ const useStyles = makeStyles((theme) => ({
   }
 }));
 
-export default function Layout() {
+const handleClick = (props) => {
+      props.history.push("/");
+  }
+
+ function Layout(props) {
   const classes = useStyles();
 
   return (
     <>
       <AppBar position="relative">
         <Toolbar>
           <Typography variant="h6" color="inherit" noWrap>
-            SQ
+            <Button color="inherit" onClick={() => handleClick(props)}>
+                SQ
+            </Button>
           </Typography>
         </Toolbar>
       </AppBar>
@@ -47,3 +55,5 @@ export default function Layout() {
     </>
   );
 }
+
+export default withRouter(Layout);

simplq/src/components/Routes.jsx

@@ -1,6 +1,5 @@
 import React from "react";
 import {
-  BrowserRouter as Router,
   Route
 } from "react-router-dom";
 import CreateQueue from "./page/CreateQueue"
@@ -9,10 +8,10 @@ import QueueStatus from "./page/QueueStatus";
 import Admin from "./page/admin/index";
 
 export default () => {
-  return <Router>
+  return <>
       <Route path="/" exact component={CreateQueue} />
       <Route path="/admin/:queueId" exact component={Admin} />
       <Route path="/:queueId" exact component={JoinQueue} />
       <Route path="/status/:queueId/:tokenId" exact component={QueueStatus} />
-  </Router>
+  </>
 }

simplq/src/index.js

@@ -4,12 +4,13 @@ import './index.css';
 import Layout from './components/Layout';
 import * as serviceWorker from './serviceWorker';
 import Routes from './components/Routes';
+import {
+  BrowserRouter as Router
+} from "react-router-dom";
 
 ReactDOM.render(
   <React.StrictMode>
-    <Layout>
-      <Routes />
-      </Layout>
+    <Router> <Layout /> </Router>
   </React.StrictMode>,
   document.getElementById('root')
 );