• Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Precios
    • Pruebas
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

75
Vistas
ReactJS: Go to anchor link in HTML with react router dom only after the full page load

I've got a React app with URLs defined with 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>
  );
};

I want to allow the user to go to a specific accordion of the document if the url contains a hash part like this /rules/someplace#accordion-3

I have a component that returns the accordions in question, which all have an id:

const CategoryDisplay: React.FC<Props> = (props) => {
...
  return (
    <>
      <Accordion
        id={`category-${accordion.id}`}/>
    </>
  );
};

export default CategoryDisplay;

And when I open an URL with an anchor like /rules/someplace#accordion-3 while I'm already on the page, everything works fine and it scrolls to the element. However, on the initial load of the page, this behavior doesn't work.

How would I go about scrolling to the element only after the page has loaded?

7 months ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

I think the idea would be to use an effect to scroll to the appropriate component after the component mounts. Perhaps something like this:

React.useEffect(() => {
    const anchor = window.location.hash.slice(1);
    if (anchor) {
        const anchorEl = document.getElementById(anchor);
        if (anchorEl) {
            anchorEl.scrollIntoView();
        }
    }
}, []);

Notes:

  • I haven't tested this.
  • useLayoutEffect instead of useEffect may give a better experience here; see this article for details.
  • I'm bypassing React and using the DOM. I usually try to avoid that, but since this logic is isolated and inherently focused on browser DOM behavior, I think this is a good use case for it (instead of complicating the code by pulling in more interactions with your React components.)
  • scrollIntoView is convenient but experimental; consider using the scroll-into-view-if-needed NPM package instead.
7 months ago · Juan Pablo Isaza Denunciar

0

I don't know if I understand correctly.

I think, you should make a function for wait everything complete.

but, if you can't catch exactly timing when everything fine, you can use trick.

example :

    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}/>
          </>
        );
    };

This will definitely run in the frame after the component mounted.

7 months ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar empleo Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2023 PeakU Inc. All Rights Reserved.