Can't access a page element in an Outlet wrapper when it mounts when ssr: false

I have the following outlet wrapper component
Every page/route has a .element DOM element
I'd like to access it in this wrapper component
For a specific route, if I set ssr: true, the NodeList contains the element, if I set ssr: false, the NodeList is empty.
Is it expected ? Is there a way to make sure the Outlet has mounted to access the .element in the wrapper when ssr = false? Or I need to do a loop until the DOM element is present.

export function AnimatedOutlet() {
  const RouterContext = getRouterContext();
  const routerContext = useContext(RouterContext);
  const renderedContext = useRef(routerContext);
  const isPresent = useIsPresent();

  if (isPresent) {
    renderedContext.current = cloneDeep(routerContext);
  }

  useEffect(() => {
    console.log(document.querySelectorAll(".element"));
  }, []);

  return (
      <RouterContext.Provider value={renderedContext.current}>
        <Outlet />
      </RouterContext.Provider>
  );
}

export function AnimatedOutlet() {
  const RouterContext = getRouterContext();
  const routerContext = useContext(RouterContext);
  const renderedContext = useRef(routerContext);
  const isPresent = useIsPresent();

  if (isPresent) {
    renderedContext.current = cloneDeep(routerContext);
  }

  useEffect(() => {
    console.log(document.querySelectorAll(".element"));
  }, []);

  return (
      <RouterContext.Provider value={renderedContext.current}>
        <Outlet />
      </RouterContext.Provider>
  );
}

TanStack•8mo ago•

1 reply

dangerous-fuchsia

Can't access a page element in an Outlet wrapper when it mounts when ssr: false

export function AnimatedOutlet() {
  const RouterContext = getRouterContext();
  const routerContext = useContext(RouterContext);
  const renderedContext = useRef(routerContext);
  const isPresent = useIsPresent();

  if (isPresent) {
    renderedContext.current = cloneDeep(routerContext);
  }

  useEffect(() => {
    console.log(document.querySelectorAll(".element"));
  }, []);

  return (
      <RouterContext.Provider value={renderedContext.current}>
        <Outlet />
      </RouterContext.Provider>
  );
}

export function AnimatedOutlet() {
  const RouterContext = getRouterContext();
  const routerContext = useContext(RouterContext);
  const renderedContext = useRef(routerContext);
  const isPresent = useIsPresent();

  if (isPresent) {
    renderedContext.current = cloneDeep(routerContext);
  }

  useEffect(() => {
    console.log(document.querySelectorAll(".element"));
  }, []);

  return (
      <RouterContext.Provider value={renderedContext.current}>
        <Outlet />
      </RouterContext.Provider>
  );
}

Can't access a page element in an Outlet wrapper when it mounts when ssr: false

Similar Threads

Can't access a page element in an Outlet wrapper when it mounts when ssr: false

Similar Threads

Similar Threads

Similar Threads