Merge pull request #63 from AudiusProject/jowlee-hash-router

Hash Routing

src/App.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import { Provider } from 'react-redux'
 import { ConnectedRouter } from 'connected-react-router'
 import { Switch, Route } from 'react-router'
-import { createBrowserHistory } from 'history'
+import { createHashHistory } from 'history'
 
 import Header from 'components/Header'
 import Home from 'containers/Home'
@@ -26,7 +26,7 @@ import Proposal from 'containers/Proposal'
 import { createStyles } from 'utils/mobile'
 
 const styles = createStyles({ desktopStyles, mobileStyles })
-const history = createBrowserHistory()
+const history = createHashHistory()
 const store = createStore(history)
 
 const Root = () => (

src/components/Header/Header.tsx

@@ -11,6 +11,7 @@ import desktopStyles from './Header.module.css'
 import mobileStyles from './HeaderMobile.module.css'
 import { createStyles } from 'utils/mobile'
 import MobileNav from 'components/MobileNav'
+import useRerouteLegacy from 'hooks/useRerouteLegacy'
 
 const styles = createStyles({ desktopStyles, mobileStyles })
 
@@ -23,6 +24,8 @@ const Header: React.FC<HeaderProps> = ({ className }) => {
   const isMobile = useIsMobile()
   const [showMobileNav, setShowMobileNav] = useState(false)
 
+  useRerouteLegacy()
+
   return (
     <div className={clsx(styles.container, { [className!]: !!className })}>
       {isMobile && (

src/components/Nav/Nav.tsx

@@ -9,6 +9,7 @@ import { AppState } from 'store/types'
 import styles from './Nav.module.css'
 import * as routes from 'utils/routes'
 import { Button, ButtonType } from '@audius/stems'
+import { useLocation } from 'react-router-dom'
 
 const navRoutes = [
   { matchParams: { path: routes.HOME, exact: true }, text: 'OVERVIEW' },
@@ -32,7 +33,9 @@ const NavButton = (props: NavButtonProps) => {
     pushRoute,
     matchParams: { path }
   } = props
-  const isActiveRoute = !!matchPath(window.location.pathname, props.matchParams)
+  const location = useLocation()
+
+  const isActiveRoute = !!matchPath(location.pathname, props.matchParams)
   const onButtonClick = useCallback(() => pushRoute(path), [path, pushRoute])
 
   return (

src/hooks/useRerouteLegacy.ts

@@ -0,0 +1,22 @@
+import { useEffect } from 'react'
+import { useLocation } from 'react-router-dom'
+
+/**
+ * NOTE: updated the route from the legacy url structure to hash routing.
+ * ie. /services/service-providers => /#/services/service-providers
+ *
+ * NOTE: When switching to being served from ipfs, this needs to be updated for the
+ * client to be loaded via ipns
+ */
+
+// -------------------------------- Hooks  --------------------------------
+export const useRerouteLegacy = () => {
+  const location = useLocation()
+  useEffect(() => {
+    if (window.location.pathname !== '/') {
+      window.history.replaceState({}, '', `/#${window.location.pathname}`)
+    }
+  }, [location])
+}
+
+export default useRerouteLegacy