Spaces:
Running
Running
fix(router): use query param instead of hash for anchor scrolling
Browse filesHashRouter already uses # for routing, so we can't use hash anchors.
Use ?scrollTo=assembly-video query param instead.
Example: /#/getting-started?scrollTo=assembly-video
- src/App.jsx +9 -6
src/App.jsx
CHANGED
|
@@ -16,20 +16,23 @@ function ScrollToTop() {
|
|
| 16 |
const location = useLocation();
|
| 17 |
|
| 18 |
useEffect(() => {
|
| 19 |
-
//
|
| 20 |
-
|
| 21 |
-
|
|
|
|
|
|
|
|
|
|
| 22 |
setTimeout(() => {
|
| 23 |
-
const element = document.getElementById(
|
| 24 |
if (element) {
|
| 25 |
element.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
| 26 |
}
|
| 27 |
}, 100);
|
| 28 |
} else {
|
| 29 |
-
//
|
| 30 |
window.scrollTo({ top: 0, behavior: 'smooth' });
|
| 31 |
}
|
| 32 |
-
}, [location.pathname, location.
|
| 33 |
|
| 34 |
return null;
|
| 35 |
}
|
|
|
|
| 16 |
const location = useLocation();
|
| 17 |
|
| 18 |
useEffect(() => {
|
| 19 |
+
// Check for scrollTo query parameter (used for anchor-like behavior with HashRouter)
|
| 20 |
+
const params = new URLSearchParams(location.search);
|
| 21 |
+
const scrollTo = params.get('scrollTo');
|
| 22 |
+
|
| 23 |
+
if (scrollTo) {
|
| 24 |
+
// Small delay to let the DOM render
|
| 25 |
setTimeout(() => {
|
| 26 |
+
const element = document.getElementById(scrollTo);
|
| 27 |
if (element) {
|
| 28 |
element.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
| 29 |
}
|
| 30 |
}, 100);
|
| 31 |
} else {
|
| 32 |
+
// Otherwise scroll to top
|
| 33 |
window.scrollTo({ top: 0, behavior: 'smooth' });
|
| 34 |
}
|
| 35 |
+
}, [location.pathname, location.search]);
|
| 36 |
|
| 37 |
return null;
|
| 38 |
}
|