Use /:instance?/xxx instead

src/app.jsx

@@ -185,17 +185,13 @@ function App() {
         {isLoggedIn && <Route path="/b" element={<Bookmarks />} />}
         {isLoggedIn && <Route path="/f" element={<Favourites />} />}
         {isLoggedIn && <Route path="/l/:id" element={<Lists />} />}
-        {isLoggedIn && (
-          <Route path="/t/:instance?/:hashtag" element={<Hashtags />} />
-        )}
-        {isLoggedIn && (
-          <Route path="/a/:instance?/:id" element={<AccountStatuses />} />
-        )}
-        <Route path="/p/l?/:instance" element={<Public />} />
+        <Route path="/:instance?/t/:hashtag" element={<Hashtags />} />
+        <Route path="/:instance?/a/:id" element={<AccountStatuses />} />
+        <Route path="/:instance?/p/l?" element={<Public />} />
         {/* <Route path="/:anything" element={<NotFound />} /> */}
       </Routes>
       <Routes>
-        <Route path="/s/:instance?/:id" element={<Status />} />
+        <Route path="/:instance?/s/:id" element={<Status />} />
       </Routes>
       <nav id="tab-bar" hidden>
         <li>

src/components/account.jsx

@@ -223,7 +223,7 @@ function Account({ account, instance: propInstance, onClose }) {
               )}
               <p class="stats">
                 <Link
-                  to={`/a/${id}`}
+                  to={instance ? `/${instance}/a/${id}` : `/a/${id}`}
                   onClick={() => {
                     hideAllModals();
                   }}

src/components/media-modal.jsx

@@ -171,7 +171,7 @@ function MediaModal({
         <span>
           {!isStatusLocation && (
             <Link
-              to={instance ? `/s/${instance}/${statusID}` : `/s/${statusID}`}
+              to={instance ? `/${instance}/s/${statusID}` : `/s/${statusID}`}
               class="button carousel-button media-post-link plain3"
               onClick={() => {
                 // if small screen (not media query min-width 40em + 350px), run onClose

src/components/timeline.jsx

@@ -114,7 +114,7 @@ function Timeline({
                 const { id: statusID, reblog, boosts } = status;
                 const actualStatusID = reblog?.id || statusID;
                 const url = instance
-                  ? `/s/${instance}/${actualStatusID}`
+                  ? `/${instance}/s/${actualStatusID}`
                   : `/s/${actualStatusID}`;
                 if (boosts) {
                   return (
@@ -265,7 +265,7 @@ function BoostsCarousel({ boosts, instance }) {
           const { id: statusID, reblog } = boost;
           const actualStatusID = reblog?.id || statusID;
           const url = instance
-            ? `/s/${instance}/${actualStatusID}`
+            ? `/${instance}/s/${actualStatusID}`
             : `/s/${actualStatusID}`;
           return (
             <li key={statusID}>

src/pages/status.jsx

@@ -639,7 +639,7 @@ function StatusPage() {
                       class="status-link"
                       to={
                         instance
-                          ? `/s/${instance}/${statusID}`
+                          ? `/${instance}/s/${statusID}`
                           : `/s/${statusID}`
                       }
                       onClick={() => {
@@ -819,7 +819,7 @@ function SubComments({ hasManyStatuses, replies, instance }) {
           <li key={r.id}>
             <Link
               class="status-link"
-              to={instance ? `/s/${instance}/${r.id}` : `/s/${r.id}`}
+              to={instance ? `/${instance}/s/${r.id}` : `/s/${r.id}`}
               onClick={() => {
                 resetScrollPosition(r.id);
               }}