React-router-dom updated from v6.30.0 to v7.2.0 #3905
Conversation
WalkthroughThe changes update the version of the Changes
Possibly related PRs
Suggested labels
Suggested reviewers
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
Our Pull Request Approval ProcessThanks for contributing! Testing Your CodeRemember, your PRs won't be reviewed until these criteria are met:
Our policies make our code better. ReviewersDo not assign reviewers. Our Queue Monitors will review your PR and assign them.
Reviewing Your CodeYour reviewer(s) will have the following roles:
CONTRIBUTING.mdRead our CONTRIBUTING.md file. Most importantly:
Other
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🔭 Outside diff range comments (1)
package.json (1)
138-138: 💡 Verification agent🧩 Analysis chain
Update @types/react-router-dom to match the new version
The types package is still on v5.1.8 while you've upgraded react-router-dom to v7.2.0. This version mismatch could lead to typing errors.
Consider updating the types package to a compatible version:
- "@types/react-router-dom": "^5.1.8", + "@types/react-router-dom": "^6.0.0",Alternatively, check if the newer versions of react-router-dom include their own types and no longer require a separate @types package.
🌐 Web query:
Does react-router-dom v7 include its own TypeScript types or is @types/react-router-dom still needed?💡 Result:
React Router DOM v7 includes its own TypeScript types, making the separate
@types/react-router-dompackage unnecessary. This continues the pattern established in v6, where the library's TypeScript support became first-class:
Built-in Type Definitions: Starting with v6, React Router DOM migrated to TypeScript, eliminating the need for external
@typespackages[5]. This carries forward in v7 via the unifiedreact-routerpackage[2][3][9].Enhanced Type Safety: v7 introduces generated types for route parameters, loader/action data, and components through its typegen system[4][8]. This provides automatic type inference for:
- Route path parameters (
:id)- Search parameters
- Loader/action inputs and outputs
- Component props
Simplified Installation: The updated package structure consolidates types directly in
react-router[2][3]:npm install react-router@latestNo separate type installs are required[5][9].
For projects upgrading from v5 or earlier, you must remove any existing
@types/react-router-dominstallations to avoid conflicts:npm uninstall @types/react-router-domThe type improvements in v7 help catch common routing errors at compile time, like:
- Mismatched route parameters
- Invalid search param types
- Incorrect loader/data consumption[4][8]
[2][4][5][9]
Citations:
- 1: https://www.npmjs.com/package/react-router-typesafe-routes
- 2: https://reactrouter.com/upgrading/v6
- 3: https://reactrouter.com/start/changelog
- 4: https://reactrouter.com/explanation/type-safety
- 5: [v6] types for react-router and react-router-dom remix-run/react-router#7494
- 6: [Bug]: v5 components with React 18 & TypeScript result in "cannot be used as a JSX component" remix-run/react-router#8794
- 7: https://www.youtube.com/watch?v=JMn_yIVl8eo
- 8: https://www.youtube.com/watch?v=ferLCqcLcGU
- 9: https://www.wisp.blog/blog/react-router-7-is-here-whats-new-and-whats-breaking
- 10: Weird errors upon scaffolding / launching the project remix-run/react-router#12414
- 11: https://www.npmjs.com/package/@types/react-router-dom
- 12: https://www.youtube.com/watch?v=h7MTWLv3xvw
- 13: https://reactrouter.com
Action Required: Remove the unnecessary dependency
React Router DOM v7 now includes built-in TypeScript types, so you no longer need a separate
@types/react-router-dompackage. Please remove the dependency from yourpackage.jsonto avoid potential conflicts. For example, delete or comment out:- "@types/react-router-dom": "^5.1.8",Also, run:
npm uninstall @types/react-router-domThis will ensure that your project leverages the built-in type definitions from React Router DOM v7 without any redundant or conflicting types.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (2)
package.json(1 hunks)src/components/EventCalender/Yearly/YearlyEventCalender.spec.tsx(1 hunks)
🧰 Additional context used
🪛 GitHub Actions: PR Workflow
package.json
[error] 1-1: Unauthorized change/delete detected for 'package.json'.
src/components/EventCalender/Yearly/YearlyEventCalender.spec.tsx
[warning] 1-1: Code style issues found in the above file. Run Prettier with --write to fix.
🔇 Additional comments (2)
package.json (2)
1-201: Address pipeline failure for package.json changesThere's a pipeline failure indicating "Unauthorized change/delete detected for 'package.json'". This might be related to project policies regarding dependency updates.
Check if there's a specific process for updating dependencies in this project, such as:
- Using a dedicated dependency update tool
- Getting approval from certain team members
- Following specific documentation procedures
You might need to discuss this with the team or review project documentation for the correct process.
🧰 Tools
🪛 GitHub Actions: PR Workflow
[error] 1-1: Unauthorized change/delete detected for 'package.json'.
61-61:❓ Verification inconclusive
Verify compatibility with React Router DOM v7
You've updated react-router-dom from v6 to v7, which is a major version upgrade. While the PR objectives suggest there are no breaking changes to the application, it's important to ensure full compatibility.
🌐 Web query:
What are the breaking changes in react-router-dom v7 compared to v6?💡 Result:
React Router v7 introduces several breaking changes from v6, primarily focused on architectural improvements and API simplifications. Here are the key breaking changes to consider when upgrading:
Core Breaking Changes
Package Structure Simplification
react-router-domis deprecated in favor of a unifiedreact-routerpackage[1][10]- New imports pattern:
// Before (v6) import { Link } from 'react-router-dom'; // After (v7) import { Link } from 'react-router';- DOM-specific components now use deep imports:
import { RouterProvider } from 'react-router/dom'; // For web apps[2]Minimum Version Requirements
- Requires React 18+ and React DOM 18+[1][7]
- Requires Node.js 20+[1][7]
Data Handling Changes
- Deprecated
json()anddefer()utilities in favor of raw objects:// Before (v6) import { json } from 'react-router-dom'; return json(data); // After (v7) return data; // or Response.json()[2][8]- New fetcher persistence behavior (old behavior removed)[1][5]
Navigation API Changes
useHistory()completely removed in favor ofuseNavigate()[3][7]- New navigation signature:
// Before (v6) navigate('/path'); // After (v7) navigate({ to: '/path', preventScrollReset: true, relative: 'path' });[4]Architectural Changes
Data Router Becomes Default
- Component-based routing (
<BrowserRouter>) still works- New preferred pattern uses function-based route definitions:
// v7 preferred approach const router = createBrowserRouter([ { path: '/', element: <RootLayout />, loader: rootLoader, children: [ { path: 'dashboard', element: <Dashboard /> } ] } ]);[3][4]Removed APIs
createBrowserHistory/createHashHistory(usecreateBrowserRouterinstead)[7]UNSAFE_DeferredDataand related utilities[5][7]fallbackElementprop (replaced byhydrateFallbackElement)[7]Migration Essentials
Critical Path Changes:
- Relative splat path handling (
dashboard/*vs*) requires code updates if not using v6 future flags[1][8]- Error boundary handling now more granular with route-level
errorElement[3]- Scroll restoration behavior improvements may require verification[5]
Type Safety Improvements:
// v7 type-safe loader const loader = async ({ params }: LoaderFunctionArgs) => { const user = await getUser(params.userId); return { user }; // No more json() wrapper[4] };[4]Most breaking changes can be mitigated by:
- Enabling all v6 future flags before upgrading[1][7]
- Using the official migration codemod for imports[10]
- Updating React/Node.js versions first[1][7]
The React Router team emphasizes these changes enable better SSR support, improved data handling, and a more sustainable architecture for future React updates[2][3][7]. While the surface-level API changes appear significant, most applications using v6 best practices can upgrade with minimal friction[1][8].
Citations:
- 1: https://reactrouter.com/upgrading/v6
- 2: https://dev.to/utkvishwas/react-router-v7-a-comprehensive-guide-migration-from-v6-7d1
- 3: https://www.wisp.blog/blog/react-router-7-is-here-whats-new-and-whats-breaking
- 4: https://www.youtube.com/watch?v=Vjau1QeTAPg
- 5: https://github.com/remix-run/react-router/blob/main/packages/react-router-dom/CHANGELOG.md
- 6: React Router v7 Docs - Missing a lot of what I used when migrating to v6 remix-run/react-router#12370
- 7: https://reactrouter.com/changelog
- 8: https://www.youtube.com/watch?v=s8H5-CZOlm0
- 9: https://reactrouter.com/upgrading/remix
- 10: https://refine.dev/docs/routing/integrations/react-router/migration-guide-v6-to-v7/
- 11: https://reactrouter.com
- 12: https://www.youtube.com/watch?v=qEg6tjtgu4M
React Router v7 Upgrade – Verify Compatibility
The package update to v7.2.0 introduces several breaking changes compared to v6. Please double-check that the changes have been fully integrated throughout the codebase:
Import Path Adjustments:
Ensure that any DOM-specific components now follow the updated import patterns (e.g., importing from'react-router'or deep imports from'react-router/dom'if applicable) instead of the legacy pattern from'react-router-dom'.API and Hook Updates:
Verify that obsolete APIs (such asuseHistory) have been replaced by their v7 counterparts (e.g.,useNavigate). Also, check that any deprecated data handling utilities (likejson()ordefer()) are updated per the new data handling specifications.Environment Requirements:
Confirm that the application satisfies the new minimum version prerequisites (React 18+ and Node.js 20+).Given these changes, a thorough review of the routing-related code is recommended to ensure no legacy v6 patterns remain.
src/components/EventCalender/Yearly/YearlyEventCalender.spec.tsx
Outdated
Show resolved
Hide resolved
What kind of change does this PR introduce?
-> Upgrades React-router-dom from v6.30.0 to v7.2.0.
Issue Number:
#3771
Summary of changes
-> Upgraded react-router-dom from 6.30.0 to 7.2.0.
-> Verified that application is working as expected.
Does this PR introduce a breaking change?
No
Summary by CodeRabbit