withAuthenticationRequired on component vs. on the routes, which is recommended?

Say I have a Dashboard view at /dashboard route and a Settings view at /settings route. According to documentation, I can protected them with auth by applying withAuthenticationRequired on both route components.

<Switch>
  <Route path="/dashboard" component={withAuthenticationRequired(Dashboard)} />
  <Route path="/settings" component={withAuthenticationRequired(Settings)} />
</Switch>

But another approach is to apply withAuthenticationRequired HOC directly on the whole routes tree.

const ProtectedRoutes = (
  <Switch>
    <Route path="/dashboard" component={Dashboard} />
    <Route path="/settings" component={Settings} />
  </Switch>
);

export default withAuthenticationRequired(ProtectedRoutes);

Which is preferred and why?