although this type of question already asked, earlier question do not able to help me.

i am trying to load api from the routes using loader params and useLoaderData hooks.

i used loader params in my existing routing structure and useLoaderData hooks in my component but it didn’t work.
i checked earlier question, they primarily works 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>
    )
}