In React router, where the logic belongs better: loader() or inside Route component?

First of all, I'm a beginner on React Router, but a mid-level dev. I'm creating a MVP app, and thinking on the next features, I got doubts about the best place to put the logic about routing.

React Router allow me to write logic about the params, redundantly BEFORE and AFTER loading the component Route (examples below).

My question is: Where is the better place? or, What are the basic bad patterns to handle route logic?

P.S. (rewrote code below to simplify understanding, so you can consider it a mock)

BEFORE ROUTING

const router = createBrowserRouter([
  {
    path: "/",
    element: <LayoutHome />,
  },
  {
    path: "/about",
    element: <About />,
  },
  {
    path: "/category/*",
    loader: ({params} => /* validate/handle the params */)
    element: <Category />,
  },
]);

AFTER ROUTING

const FunctionComponent = () => {
  const [events, setEvents] = useState([]);

  const { "*": id } = useParams();

  if (typeof Number(id) !== "number")
    return (
      /* default output */
    );

  if (id) {
    /* main logic of the component. in this case, fetch data */
  }

  return (
/* component output*/
)