I am trying to load API from the routes using loader, params, and useLoaderData
hook.
I used loader params in my existing routing structure and useLoaderData
hook in my component but it didn’t work.
I checked other questions, but they primarily work on single component routing structure, but for me routing for all components are already done. How can I modify my router accordingly?
<BrowserRouter>
<Header />
<Routes>
<Route path='/' element={<Home />} />
<Route path='/about' element={<About />} />
<Route path='/services' element={<Services />} >
<Route element={<WebServices />} index />
<Route path='web' element={<WebServices />} />
<Route path='app' element={<AppServices />} />
<Route path='cloud' element={<CloudServices />} />
</Route>
<Route path='/blog' element={<Blog />} loader={fetchPosts} />
<Route path='*' element={<Page404 />} />
</Routes>
</BrowserRouter>
function Blog(props) {
const list = useLoaderData();
return (
<div className='blog-container'>
<div className='container'>
<h1>Your Blog comes here</h1>
</div>
<div className='blog-post-container'>
{list && list.length > 0
? list.map((item, index) => {
return (
<div className='blog-card'></div>
)
}) : <p>No post found</p>
}
</div>
</div>
)
}