Yes, this would work! And in fact in an earlier implementation I did exactly that. (I also tried implementing this with higher-order components that run the check before rendering the children.)
I think the wrapping-component pattern works fine if you have a small number of general-purpose guards, and they apply to logically connected groups of routes that you might want to wrap in a <Set> anyway. However, it’s a less flexible pattern than the useGuard hook because you probably wouldn’t bother creating a <Set> and a dedicated <Guard> component for a check that’s only used in one or two places.
Going back to the signup form example, on step 3 of the signup flow you might want to check both that the user doesn’t have an account and that they’ve already completed step 2. Extending the example from my initial post, you could write that check like this:
const SignUpStep3 = () => {
requireNoExistingProfile()
useGuard(formState.step2Fields != null, routes.signUpStep2())
// ...
}
Admittedly this example is getting a bit contrived, but I hope it illustrates the idea!