fix: handle 404 on unknown top level routes (#10964)

f0ssel · web-flow · commit 60d0aa6930ae · 2023-12-01T12:35:44.000-05:00
diff --git a/site/src/AppRouter.tsx b/site/src/AppRouter.tsx
@@ -320,26 +320,29 @@ export const AppRouter: FC = () => {
                 </Route>
               </Route>
 
-              <Route path="/:username">
-                <Route path=":workspace">
-                  <Route index element={<WorkspacePage />} />
-                  <Route
-                    path="builds/:buildNumber"
-                    element={<WorkspaceBuildPage />}
-                  />
-                  <Route path="settings" element={<WorkspaceSettingsLayout />}>
-                    <Route index element={<WorkspaceSettingsPage />} />
-                    <Route
-                      path="parameters"
-                      element={<WorkspaceParametersPage />}
-                    />
-                    <Route
-                      path="schedule"
-                      element={<WorkspaceSchedulePage />}
-                    />
-                  </Route>
-                </Route>
+              {/* In order for the 404 page to work properly the routes that start with
+              top level parameter must be fully qualified. */}
+              <Route path="/:username/:workspace" element={<WorkspacePage />} />
+              <Route
+                path="/:username/:workspace/builds/:buildNumber"
+                element={<WorkspaceBuildPage />}
+              />
+              <Route
+                path="/:username/:workspace/settings"
+                element={<WorkspaceSettingsLayout />}
+              >
+                <Route index element={<WorkspaceSettingsPage />} />
+                <Route
+                  path="parameters"
+                  element={<WorkspaceParametersPage />}
+                />
+                <Route path="schedule" element={<WorkspaceSchedulePage />} />
               </Route>
+
+              {/* Using path="*"" means "match anything", so this route
+              acts like a catch-all for URLs that we don't have explicit
+              routes for. */}
+              <Route path="*" element={<NotFoundPage />} />
             </Route>
 
             {/* Pages that don't have the dashboard layout */}
@@ -354,11 +357,6 @@ export const AppRouter: FC = () => {
               element={<TemplateVersionEditorPage />}
             />
           </Route>
-
-          {/* Using path="*"" means "match anything", so this route
-        acts like a catch-all for URLs that we don't have explicit
-        routes for. */}
-          <Route path="*" element={<NotFoundPage />} />
         </Routes>
       </Router>
     </Suspense>
