ATlast — you'll never need to find your favorites on another platform again. Find your favs in the ATmosphere.
atproto

add React Router for extension import flow

- Install react-router-dom
- Create Router component with / and /import/:id routes
- Update main.tsx to use Router
- Enables URL-based navigation for extension imports

byarielm.fyi c24f6c6a 4d148061

verified
Changed files
+24 -2
packages
+1
packages/web/package.json
··· 19 19 "lucide-react": "^0.544.0", 20 20 "react": "^18.3.1", 21 21 "react-dom": "^18.3.1", 22 + "react-router-dom": "^7.11.0", 22 23 "zustand": "^5.0.9" 23 24 }, 24 25 "devDependencies": {
+21
packages/web/src/Router.tsx
··· 1 + import { BrowserRouter, Routes, Route } from 'react-router-dom'; 2 + import App from './App'; 3 + import ExtensionImport from './pages/ExtensionImport'; 4 + 5 + /** 6 + * Application Router 7 + * Handles all routing for the application 8 + */ 9 + export default function Router() { 10 + return ( 11 + <BrowserRouter> 12 + <Routes> 13 + {/* Main app route */} 14 + <Route path="/" element={<App />} /> 15 + 16 + {/* Extension import route */} 17 + <Route path="/import/:importId" element={<ExtensionImport />} /> 18 + </Routes> 19 + </BrowserRouter> 20 + ); 21 + }
+2 -2
packages/web/src/main.tsx
··· 1 1 import React from "react"; 2 2 import ReactDOM from "react-dom/client"; 3 - import App from "./App"; 3 + import Router from "./Router"; 4 4 import "./index.css"; 5 5 6 6 ReactDOM.createRoot(document.getElementById("root")!).render( 7 7 <React.StrictMode> 8 - <App /> 8 + <Router /> 9 9 </React.StrictMode>, 10 10 );