Fix routing

src/components/App/index.tsx

@@ -1,14 +1,27 @@
 import React from 'react'
+import { Switch, Route, useHistory } from 'react-router-dom'
 import './index.css'
 
 import Header from '~components/Header'
 import Main from '~components/Main'
 
-function App() {
+import New from '~routes/New'
+import Party from '~routes/Party'
+import Parties from '~routes/Parties'
+import Profile from '~routes/Profile'
+
+
+const App = () => {
+    const history = useHistory()
+    const route = (pathname: string) => history.push(pathname)
+
     return (   
         <div>
-            <Header />
-            <Main />
+            <Header navigate={route} />
+            <Route exact path='/' component={New} />
+            <Route exact path='/parties/' component={Parties} />
+            <Route path='/p/:hash' component={Party} />
+            <Route exact path='/:username' component={Profile} />
         </div>
     )
 }

src/components/Header/index.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import { RouteComponentProps, useLocation, withRouter } from 'react-router-dom'
+import { useLocation } from 'react-router-dom'
 import { useCookies } from 'react-cookie'
 
 import Button from '~components/Button'
@@ -7,13 +7,16 @@ import HeaderMenu from '~components/HeaderMenu'
 
 import './index.css'
 
-interface Props {}
-interface HeaderProps extends RouteComponentProps<Props> {}
+interface Props {
+    navigate: (pathname: string) => void
+}
 
-const Header: React.FC<HeaderProps> = (props: HeaderProps) => {
+const Header = (props: Props) => {
     const [username, setUsername] = useState(undefined)
     const [cookies, setCookie, removeCookie] = useCookies(['user'])
     let location = useLocation()
+    
+    const route = (pathname: string) => props.navigate(pathname)
 
     useEffect(() => {
         if (cookies.user) {
@@ -33,16 +36,7 @@ const Header: React.FC<HeaderProps> = (props: HeaderProps) => {
     }
 
     function newParty() {
-        if (props.history.location.pathname === '/') {
-            window.history.replaceState(null, `Grid Tool`, `/`)
-            props.history.go(0)
-        } else {
-            props.history.push('/')
-        }
-    }
-
-    function route(pathname: string) {
-        props.history.push(pathname)
+        props.navigate('/')
     }
 
     function logout() {
@@ -60,7 +54,7 @@ const Header: React.FC<HeaderProps> = (props: HeaderProps) => {
             <div className="left">
                 <div className="dropdown">
                     <Button type="menu">Menu</Button>
-                    <HeaderMenu username={username} navigate={route} logout={logout} />
+                    <HeaderMenu username={username} logout={logout} />
                 </div>
             </div>
             <div className="push" />
@@ -74,4 +68,4 @@ const Header: React.FC<HeaderProps> = (props: HeaderProps) => {
     )
 }
 
-export default withRouter(Header)
+export default Header

src/components/HeaderMenu/index.css

@@ -23,6 +23,14 @@
     background: #e9e9e9;
 }
 
+.MenuItem a {
+    color: #777
+}
+
+.MenuItem a:hover {
+    color: #555
+}
+
 .MenuGroup {
     border-bottom: 2px solid #f5f5f5;
 }

src/components/HeaderMenu/index.tsx

@@ -6,12 +6,12 @@ import SignupModal from '~components/SignupModal'
 
 import { useModal as useSignupModal } from '~utils/useModal'
 import { useModal as useLoginModal } from '~utils/useModal'
-import { Route } from 'react-router'
+import { Link, Route } from 'react-router-dom'
+import Profile from '~routes/Profile'
 
 
 interface Props {
     username?: string
-    navigate: (pathname: string) => void
     logout: () => void
 }
 
@@ -21,18 +21,27 @@ const HeaderMenu = (props: Props) => {
 
     function authItems() {
         return (
-            <ul className="Menu auth">
-                <div className="MenuGroup">
-                    <li className="MenuItem" onClick={ () => props.username ? props.navigate(`/${props.username}`) : '' }>My Parties</li>
-                </div>
-                <div className="MenuGroup">
-                    <li className="MenuItem" onClick={ () => props.navigate('about') }>About</li>
-                    <li className="MenuItem" onClick={ () => props.navigate('guides') }>Guides</li>
-                </div>
-                <div className="MenuGroup">
-                    <li className="MenuItem" onClick={props.logout}>Logout</li>
-                </div>
-            </ul>
+            <nav>
+                <ul className="Menu auth">
+                    <div className="MenuGroup">
+                        <li className="MenuItem">
+                            <Link to={props.username || ''}>My Parties</Link>
+                        </li>
+                    </div>
+                    <div className="MenuGroup">
+                        <li className="MenuItem">
+                            <Link to='/about'>About</Link>
+                        </li>
+
+                        <li className="MenuItem">
+                            <Link to='/guides'>Guides</Link>
+                        </li>
+                    </div>
+                    <div className="MenuGroup">
+                        <li className="MenuItem" onClick={props.logout}>Logout</li>
+                    </div>
+                </ul>
+            </nav>
         )
     }
 

src/components/Main/index.tsx

@@ -1,27 +0,0 @@
-import React from 'react'
-import { Router, Route } from 'react-router-dom'
-
-import history from '~utils/history'
-
-import New from '~routes/New'
-import Party from '~routes/Party'
-import Parties from '~routes/Parties'
-import Profile from '~routes/Profile'
-
-// The Main component renders one of the three provided
-// Routes (provided that one matches). Both the /roster
-// and /schedule routes will match any pathname that starts
-// with /roster or /schedule. The / route will only match
-// when the pathname is exactly the string "/"
-const Main = () => (
-  <main>
-    <Router history={history}>
-      <Route exact path='/' component={New} />
-      <Route exact path='/parties/' component={Parties} />
-      <Route path='/p/:hash' component={Party} />
-      <Route exact path='/:username' component={Profile} />
-    </Router>
-  </main>
-)
-
-export default Main

src/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
+import { createBrowserHistory } from 'history'
 import { CookiesProvider } from 'react-cookie'
 import { BrowserRouter } from 'react-router-dom'