- Update package.json: react-router-dom ^5.2.0→^6.28.0 - Migrate App.js: Switch→Routes, component→element props, path="*" for 404 - Migrate 5 pages: useHistory→useNavigate, history.push()→navigate() - GroupsOverviewPage.js (4x navigate) - ModerationGroupsPage.js (1x navigate) - ModerationGroupImagesPage.js (2x navigate) - PublicGroupImagesPage.js (import updated) - SlideshowPage.js (4x navigate + keyboard handler) - Regenerate package-lock.json with react-router v6 ✅ Tested: Production build 254.46 KB gzip (+1.17 KB) ✅ Manual test: Navigation, moderation routing, slideshow ESC - all working Phase 3 complete: Modern react-router v6 with improved routing API.
29 lines
1.1 KiB
JavaScript
29 lines
1.1 KiB
JavaScript
import './App.css';
|
|
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
|
|
|
|
// Pages
|
|
import MultiUploadPage from './Components/Pages/MultiUploadPage';
|
|
import SlideshowPage from './Components/Pages/SlideshowPage';
|
|
import GroupsOverviewPage from './Components/Pages/GroupsOverviewPage';
|
|
import ModerationGroupsPage from './Components/Pages/ModerationGroupsPage';
|
|
import ModerationGroupImagesPage from './Components/Pages/ModerationGroupImagesPage';
|
|
import PublicGroupImagesPage from './Components/Pages/PublicGroupImagesPage';
|
|
import FZF from './Components/Pages/404Page.js'
|
|
|
|
function App() {
|
|
return (
|
|
<Router>
|
|
<Routes>
|
|
<Route path="/" exact element={<MultiUploadPage />} />
|
|
<Route path="/slideshow" element={<SlideshowPage />} />
|
|
<Route path="/groups/:groupId" element={<PublicGroupImagesPage />} />
|
|
<Route path="/groups" element={<GroupsOverviewPage />} />
|
|
<Route path="/moderation" exact element={<ModerationGroupsPage />} />
|
|
<Route path="/moderation/groups/:groupId" element={<ModerationGroupImagesPage />} />
|
|
<Route path="*" element={<FZF />} />
|
|
</Routes>
|
|
</Router>
|
|
);
|
|
}
|
|
|
|
export default App; |