Tengo una aplicación React con URL definidas con React Router:
const App: React.FC = (): JSX.Element => { return ( <Router> <Switch> <Redirect exact from="/" to="/rules" /> <Route exact path={["/rules", "/rules/:placeId"]} component={LandingPage} /> <Route exact path={["/route", "/route/:start/:end"]} component={RoutePage} /> </Switch> </Router> ); }; Quiero permitir que el usuario vaya a un acordeón específico del documento si la URL contiene una parte hash como esta /rules/someplace#accordion-3
Tengo un componente que devuelve los acordeones en cuestión, todos los cuales tienen una identificación:
const CategoryDisplay: React.FC<Props> = (props) => { ... return ( <> <Accordion id={`category-${accordion.id}`}/> </> ); }; export default CategoryDisplay; Y cuando abro una URL con un ancla como /rules/someplace#accordion-3 mientras ya estoy en la página, todo funciona bien y se desplaza al elemento. Sin embargo, en la carga inicial de la página, este comportamiento no funciona.
¿Cómo haría para desplazarme hasta el elemento solo después de que se haya cargado la página?
Creo que la idea sería usar un efecto para desplazarse al componente apropiado después de que se monte el componente. Tal vez algo como esto:
React.useEffect(() => { const anchor = window.location.hash.slice(1); if (anchor) { const anchorEl = document.getElementById(anchor); if (anchorEl) { anchorEl.scrollIntoView(); } } }, []);Notas:
No se si entendí bien.
Creo que deberías hacer una función para esperar que todo se complete.
pero, si no puede captar exactamente el tiempo cuando todo está bien, puede usar el truco.
ejemplo :
const CategoryDisplay: React.FC<Props> = (props) => { ... const [accordionId, setAccordionId] = useState(""); useEffect(()=>{ // this component mounted ... setTimeout(()=>{ // do something setAccordionId(`category-${accordion.id}`); },0); }, []); return ( <> <Accordion id={accordionId}/> </> ); };Esto definitivamente se ejecutará en el marco después de montar el componente.