Hydration issues when using props.children inside component
return (
<Router
root={(props) => (
<MetaProvider>
<QueryClientProvider client={queryClient}>
<Title>Schizophrenia poll</Title>
<ErrorBoundar>
<Suspense>
<NavBar />
<TransitionSlideGlobal>{props.children}</TransitionSlideGlobal>
</Suspense>
</ErrorBoundary>
</QueryClientProvider>
</MetaProvider>
)}>
<FileRoutes />
</Router>
); return (
<Router
root={(props) => (
<MetaProvider>
<QueryClientProvider client={queryClient}>
<Title>Schizophrenia poll</Title>
<ErrorBoundar>
<Suspense>
<NavBar />
<TransitionSlideGlobal>{props.children}</TransitionSlideGlobal>
</Suspense>
</ErrorBoundary>
</QueryClientProvider>
</MetaProvider>
)}>
<FileRoutes />
</Router>
);Code is that in app.tsx, problem is that I get hydration mismatch. <TransitionSlideGlobal> just uses solid-transition-group.
return (
<>
<Transition>
{props.children}
</Transition>
<Transition
<Show when={vis()}>
<Footer />
</Show>
</Transition>
</>
);return (
<>
<Transition>
{props.children}
</Transition>
<Transition
<Show when={vis()}>
<Footer />
</Show>
</Transition>
</>
);
