Routes vs tutorial loader/actions method

[marksmall]

Sorry this covers a couple of topics, but, they all apply to my current situation. I've been using the style:

<Routes>
  <Route path="login" element={<LoginForm user={user} />} />
  <Route path="register" element={<RegisterForm />} />  
</Routes>

For some time now and it's great, I know exactly what is going on. I took a look at the latest tutorial, which seems to want us to use the more remix-y style of loaders and actions, which I'm up for, but there are a couple of things I don't get, that I've not been able to extrapolate from the tutorial and I'm hoping to get some clarity.

1. Is the loaders/actions the way to go, will <Routes>...</Routes> style be deprecated in the near-ish future?
2. If loaders and actions are the way forward, how do I pass props, say I've got some local state and I want that passed to routed component, how is that achieved? Do you consider that to be bad practice? I didn't see anything in the tutorial. Yes there were util functions that could be called from within loaders/actions, but nothing about passing props, that I saw at least. The fact the routing is defined outside any component, confuses my little brain, as to how this would even be possible.
3. react-router-dom has some form functionality, which is okay, but we heavily use react-hook-form and integrate that with zod, for client-side validation, I've tried to use theuseSubmit hook with this, so that the form's onSubmit uses the handleSubmit to a local function in the component, which in turn calls the submit function from useSubmit hook, but have yet to get the action function to be called, is there an example somewhere. I get this is about integrating libraries, one of which isn't react-router and you may not want to wade in on this one, but it would be nice if you could.

Most 3rd party blogs still use the <Routes> approach, but I'd like to future-proof my new app as much as possible, so any advice would be appreciated, thanks in advance.

[KtlPro]

Hello! We're using the Remix router approach and I wanted to follow up on this question--particularly part 2. Is there guidance on how to handle dynamic props between components? It seems to be a bit of a Catch-22, since a global useState can't be used when defining routes, and there is not really a way to pass props "peer-to-peer" between the components, since the routes object will expect that the routes be passed there.

I can't find any guidance in the documentation, nor in any 3rd party blogs. Please let me know if I just missed something, though.

[kiliman]

With React Router data routers, it's recommended you provide data to your routes via loaders.

However, it is still basically a React app, so nothing is preventing you from using context providers (which is basically what React Router uses).

Since React Router instantiates your route components, you don't have access to props. However, you can always wrap your component in a route that gets data via useLoaderData, context, etc., and then pass that as props to your component.

[KtlPro]

Thank you @kiliman for the response.