Folder Structure and useFetcher generic typing in v7

[RSchneider94]

Hi everyone,

I'm currently experimenting with React Router v7 and have set up my project with the following structure:

• A home.tsx route inside the routes folder, which includes a loader and default exports Home which is basically a return of a HomeScreen component
  • HomeScreen is located at app/src/screens/Home/Home.tsx. This folder also contains a components subfolder for screen-specific components.
• At the src level, I've also added like a services folder and a components folder for reusable UI components, like a styled Select.

I was following this section of the documentation but couldn't get useFetcher to be properly typed inside a component located at app/src/screens/Home/components/SelectForm/SelectForm.tsx. There's no action property on Home, so I'm wondering:

1. Does React Router v7 support this folder structure by default, or do I need to configure something for useFetcher typings to work properly in this context?
2. What folder structures do you typically use when organizing routes, screens, and components in React Router v7? I'd love to hear different approaches and best practices.

Thanks!