Render some component on client with useEffect
I have a component NavBar which I want to be client component inside route '/' which needs to be ssr. How to achieve this in tanstack-start?
1 Reply
adverse-sapphireOP•2mo ago
This is the index file
Navbar component specifically
but this not being visible
got it worked. There were many other bugs that was causing issue
import BrowseCollections from '@/components/home/BrowseCollections'
import FeaturedCategories from '@/components/home/FeaturedCategories'
import FeaturedProducts from '@/components/home/FeaturedProducts'
import PrepareForRamadan from '@/components/home/FeaturedSellers'
import HeroSection from '@/components/home/HeroSection'
import NewsletterSection from '@/components/home/NewsletterSection'
import SellerSpotlight from '@/components/home/SellerSpotlight'
import Navbar from '@/components/layout/Navbar'
import { createFileRoute } from '@tanstack/react-router'
import { Footer } from 'react-day-picker'
export const Route = createFileRoute('/')({
component: App,
})
export default function App() {
return (
<div className="min-h-screen flex flex-col">
<Navbar />
<main className="flex-grow">
<HeroSection />
<NewsletterSection />
<FeaturedCategories />
<BrowseCollections />
<FeaturedProducts />
<SellerSpotlight />
<PrepareForRamadan />
<NewsletterSection />
</main>
<Footer />
</div>
)
}
import BrowseCollections from '@/components/home/BrowseCollections'
import FeaturedCategories from '@/components/home/FeaturedCategories'
import FeaturedProducts from '@/components/home/FeaturedProducts'
import PrepareForRamadan from '@/components/home/FeaturedSellers'
import HeroSection from '@/components/home/HeroSection'
import NewsletterSection from '@/components/home/NewsletterSection'
import SellerSpotlight from '@/components/home/SellerSpotlight'
import Navbar from '@/components/layout/Navbar'
import { createFileRoute } from '@tanstack/react-router'
import { Footer } from 'react-day-picker'
export const Route = createFileRoute('/')({
component: App,
})
export default function App() {
return (
<div className="min-h-screen flex flex-col">
<Navbar />
<main className="flex-grow">
<HeroSection />
<NewsletterSection />
<FeaturedCategories />
<BrowseCollections />
<FeaturedProducts />
<SellerSpotlight />
<PrepareForRamadan />
<NewsletterSection />
</main>
<Footer />
</div>
)
}
useEffect(() => {
console.log('useffect ran');
if (location.pathname === "/") {
setIsLogoAnimated(false);
setTimeout(() => {
setIsLogoAnimated(true);
}, 100);
} else {
setIsLogoAnimated(true);
}
}, [location.pathname]);
<Link
to="/"
className={cn(
"text-2xl font-bold text-emerald-600 transition-all duration-300 transform",
"hover:text-emerald-700 hover:scale-105",
isLogoAnimated ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-4"
)}
>
anhar
</Link>
useEffect(() => {
console.log('useffect ran');
if (location.pathname === "/") {
setIsLogoAnimated(false);
setTimeout(() => {
setIsLogoAnimated(true);
}, 100);
} else {
setIsLogoAnimated(true);
}
}, [location.pathname]);
<Link
to="/"
className={cn(
"text-2xl font-bold text-emerald-600 transition-all duration-300 transform",
"hover:text-emerald-700 hover:scale-105",
isLogoAnimated ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-4"
)}
>
anhar
</Link>