Deal with Link not being allowed without a router

src/components/DemoLibrary.js

@@ -31,7 +31,7 @@
 /// (Assuming this component is mounted there in the React router.)
 
 import Library from 'react-demo-library'
-import { Link } from "react-router-dom"
+import { SafeLink } from "./SafeLink"
 
 // To auto-magically pick up demos, we use this magic to tell Webpack what we
 // want it to grab (*.demo.js, recursively), which it can work out at bundle
@@ -74,7 +74,7 @@ export const DemoLibrary = () => {
         // Because the demo UI does a bunch of full-browser-size stuff we have to float our back link over it
       }
       <div style={{position: "absolute", left: "0.5em", bottom: "0.5em", zIndex: 1001}}>
-        <Link to="/">Back to Tube Map</Link>
+        <SafeLink to="/">Back to Tube Map</SafeLink>
       </div>
       <Library demos={demoList}/>
     </>

src/components/Footer.js

@@ -1,15 +1,16 @@
 /// Footer.js: main page footer component. Includes project page links and demo link.
 
 import { Container, Row, Col, Navbar, Nav, NavItem, NavLink } from "reactstrap"
-import { Link } from "react-router-dom"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { faGithub } from "@fortawesome/free-brands-svg-icons"
 import { faCode, faDna } from "@fortawesome/free-solid-svg-icons"
 
+import SafeLink from "./SafeLink"
+
 import PACKAGE from "../../package.json"
 
 
-export default function Footer() {
+export const Footer = () => {
   return (
     <Container tag="footer" fluid={true} style={{marginTop: "1em"}}>
       <Row className="bg-light">
@@ -30,7 +31,7 @@ export default function Footer() {
             </Nav>
             <Nav>
               <NavItem>
-                <Link to="/demo" title="Component Demos" style={{textDecoration: "none"}}><NavLink><FontAwesomeIcon icon={faCode} size="md" /> Component Demos</NavLink></Link>
+                <SafeLink to="/demo" title="Component Demos" style={{textDecoration: "none"}}><NavLink><FontAwesomeIcon icon={faCode} size="md" /> Component Demos</NavLink></SafeLink>
               </NavItem>
             </Nav>
           </Navbar>
@@ -39,3 +40,5 @@ export default function Footer() {
     </Container>
   )
 }
+
+export default Footer

src/components/SafeLink.js

@@ -0,0 +1,25 @@
+/// SafeLink.js: React Router-compatible Link component that doesn't explode if
+/// not used inside a React Router.
+
+import { Link, useInRouterContext } from "react-router-dom"
+
+export const SafeLink = ({children, ...props}) => {
+  // Find out if we are in a router
+  let insideRouter = useInRouterContext()
+  if (insideRouter) {
+    // We can use Link
+    return (
+      <Link {...props}>{children}</Link>  
+    )
+  } else {
+    // We can't use Link
+    // Also try to fix to -> href
+    let {to, href, ...otherProps} = props
+    let fixedProps = {href: href || to, ...otherProps}
+    return (
+      <a {...fixedProps}>{children}</a>
+    )
+  }
+}
+
+export default SafeLink

src/index.js

@@ -11,10 +11,14 @@ ReactDOM.render((
 <BrowserRouter>
   <Routes>
     <Route path="/">
-      // Main application renders at the root
+      {
+        // Main application renders at the root
+      }
       <Route index element={<App />} />
-      // Demos for custom controls show up at /demo
-      // Each demo gets a nice hashbang URL.
+      {
+        // Demos for custom controls show up at /demo
+        // Each demo gets a nice hashbang URL.
+      }
       <Route path="demo" element={<DemoLibrary />} />
     </Route>
   </Routes>