Moved to browser routing

src/App.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { ThemeProvider } from "theme-ui";
-import { HashRouter as Router, Switch, Route } from "react-router-dom";
+import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
 
 import theme from "./theme.js";
 import Home from "./routes/Home";

src/components/Footer.js

@@ -1,5 +1,7 @@
 import React from "react";
-import { Flex, Link } from "theme-ui";
+import { Flex } from "theme-ui";
+
+import Link from "./Link";
 
 function Footer() {
   return (
@@ -12,13 +14,13 @@ function Footer() {
         justifyContent: "center",
       }}
     >
-      <Link m={2} href="#/about" variant="footer">
+      <Link m={2} to="/about" variant="footer">
         About
       </Link>
-      <Link m={2} href="#/" variant="footer">
+      <Link m={2} to="/" variant="footer">
         Home
       </Link>
-      <Link m={2} href="#/faq" variant="footer">
+      <Link m={2} to="/faq" variant="footer">
         FAQ
       </Link>
     </Flex>

src/components/Link.js

@@ -0,0 +1,13 @@
+import React from "react";
+import { Link as ThemeLink } from "theme-ui";
+import { Link as RouterLink } from "react-router-dom";
+
+function Link({ to, ...rest }) {
+  return (
+    <RouterLink to={to}>
+      <ThemeLink {...rest} />
+    </RouterLink>
+  );
+}
+
+export default Link;

src/components/StartStreamButton.js

@@ -1,7 +1,9 @@
 import React, { useState } from "react";
-import { IconButton, Box, Text, Link } from "theme-ui";
+import { IconButton, Box, Text } from "theme-ui";
 import adapter from "webrtc-adapter";
 
+import Link from "../components/Link";
+
 import StartStreamModal from "../modals/StartStreamModal";
 
 function StartStreamButton({ onStreamStart, onStreamEnd, stream }) {
@@ -20,7 +22,7 @@ function StartStreamButton({ onStreamStart, onStreamEnd, stream }) {
         Browser not supported for audio sharing.
         <br />
         <br />
-        See <Link href="#/faq">FAQ</Link> for more information.
+        See <Link to="/faq">FAQ</Link> for more information.
       </Text>
     </Box>
   );
@@ -33,7 +35,7 @@ function StartStreamButton({ onStreamStart, onStreamEnd, stream }) {
         Ensure "Share audio" is selected when sharing.
         <br />
         <br />
-        See <Link href="#/faq">FAQ</Link> for more information.
+        See <Link to="/faq">FAQ</Link> for more information.
       </Text>
     </Box>
   );

src/routes/About.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Flex, Text, Link } from "theme-ui";
+import { Flex, Text, Link as ExternalLink } from "theme-ui";
 
 import Footer from "../components/Footer";
 
@@ -37,17 +37,22 @@ function About() {
         </Text>
         <Text variant="body2" as="p">
           Made by two people in Melbourne, Australia.{" "}
-          <Link href="https://mitchmccaffrey.com/">Mitch</Link> and{" "}
+          <ExternalLink href="https://mitchmccaffrey.com/">Mitch</ExternalLink>{" "}
-          <Link href="https://twitter.com/nthouliss">Nicola</Link> were looking
+          and{" "}
-          for an easy way to continue their d{"&"}d campaign as in-person
+          <ExternalLink href="https://twitter.com/nthouliss">
-          interaction becomes harder during the COVID-19 crisis.
+            Nicola
+          </ExternalLink>{" "}
+          were looking for an easy way to continue their d{"&"}d campaign as
+          in-person interaction becomes harder during the COVID-19 crisis.
         </Text>
         <Text my={1} mt={2} variant="heading" as="h3" sx={{ fontSize: 3 }}>
           Contact
         </Text>
         <Text variant="body2" as="p">
           For questions or feedback email{" "}
-          <Link href="mailto:contact@owlbear.rodeo">contact@owlbear.rodeo</Link>
+          <ExternalLink href="mailto:contact@owlbear.rodeo">
+            contact@owlbear.rodeo
+          </ExternalLink>
         </Text>
       </Flex>
       <Footer />

src/routes/FAQ.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Flex, Text, Link, Image } from "theme-ui";
+import { Flex, Text, Link as ExternalLink, Image } from "theme-ui";
 
 import Footer from "../components/Footer";
 
@@ -56,9 +56,9 @@ function FAQ() {
           feature of the Screen Capture API. Currently the two browsers that
           support this are Google Chrome and Microsoft Edge. To see if your
           browser is supported see the{" "}
-          <Link href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia#Browser_compatibility">
+          <ExternalLink href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia#Browser_compatibility">
             Browser Compatibility chart
-          </Link>{" "}
+          </ExternalLink>{" "}
           on the Mozilla Developer Network.
         </Text>
         <Text my={1} variant="heading" as="h2" sx={{ fontSize: 3 }}>
@@ -87,9 +87,9 @@ function FAQ() {
         <Text mb={2} variant="body2" as="p">
           Owlbear Rodeo uses peer to peer connections to send data between the
           players. Specifically the{" "}
-          <Link href="https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API">
+          <ExternalLink href="https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API">
             WebRTC API
-          </Link>{" "}
+          </ExternalLink>{" "}
           is used. WebRTC allows the sending of two types of data, the first is
           media such as a camera or microphone and the second is raw data such
           as chat messages or in this case the state of the game map. <br /> As
@@ -104,20 +104,20 @@ function FAQ() {
           user experience so we have decided against it at this time. <br />
           The good news is that Safari will still work if the two devices are
           connected to a separate network as we make use of{" "}
-          <Link href="https://en.wikipedia.org/wiki/Traversal_Using_Relays_around_NAT">
+          <ExternalLink href="https://en.wikipedia.org/wiki/Traversal_Using_Relays_around_NAT">
             TURN
-          </Link>{" "}
+          </ExternalLink>{" "}
           servers which will handle the IP sharing and are not blocked by
           Safari. So if you're seeing errors and are on the same network as the
           other person if possible switch to separate networks and try again.
           For more information about Safari's restrictions on WebRTC see this{" "}
-          <Link href="https://bugs.webkit.org/show_bug.cgi?id=173052">
+          <ExternalLink href="https://bugs.webkit.org/show_bug.cgi?id=173052">
             bug report
-          </Link>{" "}
+          </ExternalLink>{" "}
           on the Webkit site or this{" "}
-          <Link href="https://webkit.org/blog/7763/a-closer-look-into-webrtc/">
+          <ExternalLink href="https://webkit.org/blog/7763/a-closer-look-into-webrtc/">
             blog post
-          </Link>
+          </ExternalLink>
           .
         </Text>
         <Text my={1} variant="heading" as="h3">
@@ -126,7 +126,10 @@ function FAQ() {
         <Text variant="body2" as="p">
           Owlbear Rodeo uses WebRTC to communicate between players. Ensure your
           browser supports WebRTC. A list of supported browsers can be found{" "}
-          <Link href="https://caniuse.com/#feat=rtcpeerconnection">here</Link>.
+          <ExternalLink href="https://caniuse.com/#feat=rtcpeerconnection">
+            here
+          </ExternalLink>
+          .
         </Text>
       </Flex>
       <Footer />

src/routes/Game.js

@@ -5,7 +5,7 @@ import React, {
   useCallback,
   useContext,
 } from "react";
-import { Flex, Box, Text, Link } from "theme-ui";
+import { Flex, Box, Text } from "theme-ui";
 import { useParams } from "react-router-dom";
 
 import { omit, isStreamStopped } from "../helpers/shared";
@@ -17,6 +17,7 @@ import Tokens from "../components/Tokens";
 import Map from "../components/Map";
 import Banner from "../components/Banner";
 import LoadingOverlay from "../components/LoadingOverlay";
+import Link from "../components/Link";
 
 import AuthModal from "../modals/AuthModal";
 
@@ -320,7 +321,7 @@ function Game() {
       <Banner isOpen={!!peerError} onRequestClose={() => setPeerError(null)}>
         <Box p={1}>
           <Text as="p" variant="body2">
-            {peerError} See <Link href="#/faq">FAQ</Link> for more information.
+            {peerError} See <Link to="/faq">FAQ</Link> for more information.
           </Text>
         </Box>
       </Banner>