What are folks using for routing with React in Meteor 3.0: Flow Router, React Router, or some other method?
The docs for 2.16 recommend Flow Router but all the examples are using Blaze.
The docs for 1.4 mention both Flow Router and React Router.
I know that there have been discussions on the forums about this before but that was in 2016.
What’s the current most popular / recommended way? Also is there a good solid example app out there with routing?
React Router 5 was easy to refer. I am moving away from React Router 6 as the data fetching pattern is not aligned with how I design my components.
These days, I am leaning toward Tanstack Router. Still, it seems like the codebase has not stabilized yet to minimize breaking changes (not a personal experience but based on comments from other developers).
I use React Router 6 with Components. I guess @rjdavid you were not satisfied with the way it moved towards hooks. I think the Components part in 5 and 6 are similar.
I have to check if what I have written is not clear. But let me repeat if it wasn’t
Whatever @rjdavid … you could do more with that attitude but that is up to you.
From V5 to V6.4 if you use the “old” way existing in 5 (no hooks or data API) nothing is changing. Thus my supposition that you adopted the data API and/or hooks.
This explains what each direction offers: Picking a Router | React Router
Now, you can repeat again what you said but … you will only take kb in a DB and it doesn’t really help anyone here.
I did not know that hooks === data API.
Back to the discussion:
React Router 6.4 has a new data pattern that is unavailable from the previous versions.
React Router’s data fetching pattern moves data loading on the navigation (route). I understand why they want to do this, and the benefits are clear. UX, simpler SSR, etc.
The disadvantage is that following this pattern means that components down the component tree must move the data fetching up to the route (and maybe use context to get the data down the component tree). Worse DX, difficult component sharing, etc.
Personally, I want my data fetching done near the component that used the data.
I haven’t delved into the new approach yet, so I’m wondering if it is not possible to do both?
Load data that are used through multiple pages up on the router and smaller data sets near their components?
Hey @merlinpatt,
We need to fix up our guide. A lot of it needs to be rewritten.
For React, we suggest using React Router. It’s popular and works well with Meteor. I’m not sure about the new ways to fetch data in version 6, so I might be using old methods.
You can see our React routing info here:
Here are two examples of routes in projects:
The second one uses their new API, but also doesn’t fetch data the new way.
