loader for nested route components

If I have a route which has several child components and each component requires some data loading, how can I add

loader

loader

functions to child components? do I load data the traditional way with

useQuery

useQuery

or should I load all data in the route and pass it to each child? or is there a better way?

 /route-a:
    <ChildComponent/> // requires data loading
    <ChildComponent2/> // requires data loading

only the route has the loader function

 /route-a:
    <ChildComponent/> // requires data loading
    <ChildComponent2/> // requires data loading

only the route has the loader function

 /route-a:
    <ChildComponent/> // requires data loading
    <ChildComponent2/> // requires data loading

only the route has the loader function

 /route-a:
    <ChildComponent/> // requires data loading
    <ChildComponent2/> // requires data loading

only the route has the loader function