forked from emre/www_projectmycelium_com
feat: add scroll-to-top behavior and hash anchor navigation
- Added ScrollToTop component to handle navigation scroll behavior - Implemented smooth scrolling to hash anchors when present in URL - Added automatic scroll to top on route changes - Imported useLocation and useEffect hooks for scroll management
This commit is contained in:
24
src/App.tsx
24
src/App.tsx
@@ -1,6 +1,6 @@
|
|||||||
import { HashRouter, Routes, Route } from 'react-router-dom';
|
import { HashRouter, Routes, Route, useLocation } from 'react-router-dom';
|
||||||
import { Layout } from './components/Layout';
|
import { Layout } from './components/Layout';
|
||||||
import { lazy, Suspense } from 'react';
|
import { lazy, Suspense, useEffect } from 'react';
|
||||||
|
|
||||||
const HomePage = lazy(() => import('./pages/home/HomePage'));
|
const HomePage = lazy(() => import('./pages/home/HomePage'));
|
||||||
const CloudPage = lazy(() => import('./pages/cloud/CloudPage'));
|
const CloudPage = lazy(() => import('./pages/cloud/CloudPage'));
|
||||||
@@ -13,9 +13,29 @@ const GpuPage = lazy(() => import('./pages/gpu/GpuPage'));
|
|||||||
const PodsPage = lazy(() => import('./pages/pods/PodsPage'));
|
const PodsPage = lazy(() => import('./pages/pods/PodsPage'));
|
||||||
const NodesPage = lazy(() => import('./pages/nodes/NodesPage'));
|
const NodesPage = lazy(() => import('./pages/nodes/NodesPage'));
|
||||||
|
|
||||||
|
function ScrollToTop() {
|
||||||
|
const { pathname, hash } = useLocation();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (hash) {
|
||||||
|
const id = hash.replace('#', '');
|
||||||
|
const element = document.getElementById(id);
|
||||||
|
if (element) {
|
||||||
|
element.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
window.scrollTo({ top: 0, left: 0, behavior: 'auto' });
|
||||||
|
}, [pathname, hash]);
|
||||||
|
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
return (
|
return (
|
||||||
<HashRouter>
|
<HashRouter>
|
||||||
|
<ScrollToTop />
|
||||||
<Suspense fallback={<div>Loading...</div>}>
|
<Suspense fallback={<div>Loading...</div>}>
|
||||||
<Routes>
|
<Routes>
|
||||||
<Route path="/" element={<Layout />}>
|
<Route path="/" element={<Layout />}>
|
||||||
|
|||||||
Reference in New Issue
Block a user