0
74
ViewsReact : navigate to a html tag inside a component
i want to go from a component to another and slide directly to an html tag inside of it .
using react router v6
<Route path="/mypage/#c" element = {<MyPage/>} />
( #c is a id of the html tag in the /mypage )
but the code i've provided isn't working .
it just goes to the page and doesn't slide into the tag .
1 answers
Answer question0
The hash should be added to the link or simply read from the URL, i.e. the location object, instead specified on the Route component's path prop. Adding it to the path will break route path matching.
<Route path="/mypage" element={<MyPage />} />
react-router-dom@6 doesn't handle linking directly to hash-tags in the document, and at the moment the best library out there for doing this in previous versions of RRD, react-router-hash-link has yet to update to support RRDv6.
The MyPage component could use a useEffect hook with a dependency on the location.hash, query the DOM, and attempt to scroll that element into view.
Example:
import { useLocation } from "react-router-dom";
const MyPage = () => {
const { hash } = useLocation();
useEffect(() => {
const el = document.querySelector(hash);
if (el) {
el.scrollIntoView({ behavior: "auto" });
}
}, [hash]);
return (
<>
... content ...
<div id="c">This is the content I'm interested in</div>
... more content ...
</>
);
};
