T
TanStack•4w ago
stormy-gold

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>
  );
}
1 Reply
rare-sapphire
rare-sapphire•4w ago
do you have a complete example?

Did you find this page helpful?