Navigate to route /${selectedSpace}

holium · Jul 12, 2023 · 29a1fc1 · 29a1fc1
1 parent 234b929
commit 29a1fc1
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 40 deletions.
diff --git a/lexicon/package.json b/lexicon/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@urbit/http-api": "^2.3.0",
-    "react-router-dom": "^6.4.3",
+    "react-router-dom": "^6.14.1",
     "zustand": "^4.3.8"
   },
   "peerDependencies": {
@@ -31,4 +31,4 @@
     "babel-loader": "^8.3.0",
     "babel-plugin-styled-components": "^2.0.7"
   }
-}
+}
diff --git a/lexicon/src/Lexicon.tsx b/lexicon/src/Lexicon.tsx
@@ -1,5 +1,11 @@
 import { useEffect } from 'react';
-import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
+import {
+  BrowserRouter,
+  Navigate,
+  redirect,
+  Route,
+  Routes,
+} from 'react-router-dom';
 import { createGlobalStyle } from 'styled-components';
 
 import {
@@ -28,6 +34,7 @@ const GlobalStyle = createGlobalStyle`
     outline: none;
   }
 `;
+
 declare global {
   interface Window {
     ship: string;
@@ -296,37 +303,37 @@ export const Lexicon = ({
   useEffect(() => {
     setShipName(shipName);
   }, [shipName]);
+
+  useEffect(() => {
+    // Start at the root path.
+    redirect('/');
+  }, []);
+
   if (!api) return null;
+
   return (
-    <>
-      <main
-        style={{
-          overflowY: 'auto',
-          height: '100vh',
-          backgroundColor: 'transparent',
-        }}
-      >
-        <GlobalStyle />
-        <Router>
-          <Routes>
-            <Route element={<Navigation selectedSpace={selectedSpace} />}>
-              <Route
-                path="/index.html/:ship/:group/:word"
-                element={<WordPage />}
-              />
-              <Route path="/index.html/:ship/:group" element={<HomePage />} />
-              <Route
-                path="/index.html/dict/:word"
-                element={<DictionaryPage />}
-              />
-              <Route
-                path="/index.html"
-                element={<p>don't mind me just redirecting over here</p>}
-              />
-            </Route>
-          </Routes>
-        </Router>
-      </main>
-    </>
+    <main
+      style={{
+        overflowY: 'auto',
+        height: '100vh',
+        backgroundColor: 'transparent',
+      }}
+    >
+      <GlobalStyle />
+      <BrowserRouter>
+        <Routes>
+          <Route element={<Navigation selectedSpace={selectedSpace} />}>
+            <Route path="/:ship/:group/:word" element={<WordPage />} />
+            <Route path="/:ship/:group" element={<HomePage />} />
+            <Route path="/dict/:word" element={<DictionaryPage />} />
+            <Route
+              path="/"
+              element={<p>don't mind me just redirecting over here</p>}
+            />
+          </Route>
+        </Routes>
+        <Navigate to={selectedSpace} />
+      </BrowserRouter>
+    </main>
   );
 };
diff --git a/trove/package.json b/trove/package.json
@@ -26,7 +26,7 @@
     "mime": "^3.0.0",
     "moment": "^2.29.4",
     "react-dnd-html5-backend": "^16.0.1",
-    "react-router-dom": "^6.4.3",
+    "react-router-dom": "^6.14.1",
     "styled-components": "^5.3.6",
     "styled-system": "^5.1.5",
     "urbit-ob": "^5.0.1",

diff --git a/trove/src/Trove.tsx b/trove/src/Trove.tsx
@@ -1,5 +1,11 @@
 import { useEffect } from 'react';
-import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
+import {
+  BrowserRouter,
+  Navigate,
+  redirect,
+  Route,
+  Routes,
+} from 'react-router-dom';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 
 import { trovePreload } from '../../app/src/os/services/ship/trove.service';
@@ -53,6 +59,11 @@ export const Trove = ({
   const space = useTroveStore((store: TroveStore) => store.space);
   const setApi = useTroveStore((store: TroveStore) => store.setApi);
 
+  useEffect(() => {
+    // Start at the root path.
+    redirect('/');
+  }, []);
+
   useEffect(() => {
     //subscribe to updates here
     TroveIPC.UIUpdates();
@@ -90,11 +101,11 @@ export const Trove = ({
       }}
     >
       <ThemeProvider theme={muiTheme}>
-        <Router>
+        <BrowserRouter>
           <Routes>
             <Route element={<Navigation selectedSpace={selectedSpace} />}>
               <Route
-                path="index.html/:ship/:group"
+                path="/:ship/:group"
                 element={
                   <Home
                     useStorage={useStorage}
@@ -104,14 +115,15 @@ export const Trove = ({
                 }
               />
               <Route
-                path="index.html/"
+                path="/"
                 element={
                   <>Enter a space in the url example: ...apps/trove/~zod/our</>
                 }
               />
             </Route>
           </Routes>
-        </Router>
+          <Navigate to={selectedSpace} />
+        </BrowserRouter>
       </ThemeProvider>
     </main>
   );

diff --git a/trove/src/components/NavigationHeader.tsx b/trove/src/components/NavigationHeader.tsx
@@ -7,6 +7,7 @@ import { WrappedBackground } from '../components';
 import { splitLastOccurrence } from '../helpers';
 import useTroveStore, { TroveStore } from '../store/troveStore';
 import { theme } from '../theme';
+
 export const NavigationHeader = () => {
   const currentSpace = useTroveStore((store: TroveStore) => store.currentSpace);
   const [stlfDisplay, setStflDisplay] = useState<string>('');

diff --git a/yarn.lock b/yarn.lock
@@ -17274,7 +17274,7 @@ react-remove-scroll@2.5.5:
     use-callback-ref "^1.3.0"
     use-sidecar "^1.1.2"
 
-react-router-dom@^6.4.3:
+react-router-dom@^6.14.1:
   version "6.14.1"
   resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.14.1.tgz#0ad7ba7abdf75baa61169d49f096f0494907a36f"
   integrity sha512-ssF6M5UkQjHK70fgukCJyjlda0Dgono2QGwqGvuk7D+EDGHdacEN3Yke2LTMjkrpHuFwBfDFsEjGVXBDmL+bWw==