Update to react-router 7 #1382
Merged
Update to react-router 7 #1382
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
✅ Deploy Preview for selfoss canceled.
|
In react-router 5, when a function is passed to `children` prop, it is rendered even when the `Route`’s `path` does not match. We did that with `EntriesPage`. https://v5.reactrouter.com/web/api/Route/route-render-methods Since we do not need to animate `EntriesPage` or anything, rendering it when not on `/entries` page is pointless. Let’s switch it to `render` prop. The upcoming react-router 6 migration will require all routes to use the `element` prop so, while at it, let’s also switch the other routes to make the future diff cleaner.
These are apparently soft deprecated in react-router 5.1 and will be removed in 6: https://reacttraining.com/blog/react-router-v5-1#meet-react-router-51 https://reactrouter.com/6.28.1/upgrading/v5#upgrade-to-react-router-v51 Since our `EntriesPage` is currently a class component, we need to wrap it in an functional one so that we can use `useParams` there. We will be able to drop the `forwardRef` once we migrate to React 19: https://react.dev/blog/2024/12/05/react-19#ref-as-a-prop
We are pushing an `id` for each entry in `this.state.entries` so filtering the array based on `ids` would just return an empty array.
Less global state the better.
https://remix.run/blog/react-router-v6 https://reactrouter.com/6.28.1/upgrading/v5 - Explicit `History` object manipulation was replaced with `navigate` function. - Similarly `Redirect` component was replaced with `Navigate` component. Also it now defaults to `push` so had to switch to `replace`. - Regex path had to be replaced with a custom validation logic (see `EntriesFilter` component): https://reactrouter.com/6.28.1/start/faq#what-happened-to-regexp-routes-paths - `Route` `path`s need to be relative. - `Link`’s `to` prop no longer accepts callback or state. - `Prompt` component was replaced with an unstable hook. Like before, it still does not handle `beforeunload` event. https://reactrouter.com/6.28.1/hooks/use-prompt#unstable_useprompt But it only works with data routers: https://reactrouter.com/6.28.1/routers/picking-a-router Yuck, I do not want framework, I just want a routing library. Dropping the feature for now.
Not much relevant to us. Just the renaming of the package, and the features behind the `future` flags being enabled by default. https://github.com/remix-run/react-router/blob/08e4f2fd399543cab776f4be8a29181093a3702c/CHANGELOG.md#v700 https://reactrouter.com/upgrading/v6
jtojnar
force-pushed
the
react-router-6
branch
from
d341be2 to
168e0e7
Compare
✅ Deploy Preview for selfoss canceled.
|
jtojnar
added
enhancement
dependencies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Unfortunately, regular expressions in routes are no longer supported so URLs likeI managed to work around remix-run/react-router#8254 with intermediary/newest/source-2/143or/unread/tag-news/259will no longer work. We will need to switch them to something like/sources/2?filter=newest#143and that will collide with the server API, so it will need to be moved to/api/subdirectory.EntriesFiltercomponent with a custom validation logic.Though I do not really like the direction of the library towards frameworkization.