-
Notifications
You must be signed in to change notification settings - Fork 0
feat: migrate from react router to tanstack router #181
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull Request Overview
This PR migrates from React Router to TanStack Router for the web application's routing system. This is a significant architectural change that replaces the existing React Router implementation with TanStack Router's file-based routing approach.
- Replaces React Router DOM with TanStack Router dependencies and configuration
- Migrates to file-based routing structure with route files in
src/routes/directory - Updates all navigation hooks and functions to use TanStack Router APIs
Reviewed Changes
Copilot reviewed 21 out of 23 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| package.json | Adds TanStack Router dependencies to root workspace |
| apps/web/package.json | Replaces react-router-dom with @tanstack/react-router dependencies |
| apps/web/vite.config.ts | Integrates TanStack Router Vite plugin for route generation |
| apps/web/src/routes/*.tsx | Creates new file-based route structure with layout and page routes |
| apps/web/src/pages/**/Use*.ts | Updates navigation hooks from react-router-dom to @tanstack/react-router |
| apps/web/src/core/routes/AppRoutes.tsx | Replaces React Router setup with TanStack Router configuration |
| apps/web/src/classes/app-session/UseAppSessionContent.ts | Updates navigation and changes default about route path |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| "@package/ui": "workspace:*", | ||
| "@tanstack/react-form": "1.19.3", | ||
| "@tanstack/react-query": "5.83.0", | ||
| "@tanstack/react-router": "^1.103.2", |
Copilot
AI
Oct 11, 2025
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Version mismatch: This package uses ^1.103.2 while the root package.json specifies ^1.132.47. All TanStack Router dependencies should use the same version to avoid compatibility issues.
| "@tanstack/react-router": "^1.103.2", | |
| "@tanstack/react-router": "^1.132.47", |
| "@package/storybook": "workspace:*", | ||
| "@storybook/react": "catalog:storybook", | ||
| "@tailwindcss/vite": "catalog:tailwind", | ||
| "@tanstack/router-plugin": "^1.103.0", |
Copilot
AI
Oct 11, 2025
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Version mismatch: This package uses ^1.103.0 while the root package.json specifies ^1.132.51. All TanStack Router dependencies should use the same version to avoid compatibility issues.
| "@tanstack/router-plugin": "^1.103.0", | |
| "@tanstack/router-plugin": "^1.132.51", |
| return ( | ||
| <AboutPage | ||
| serverVersion={intl.formatMessage({ | ||
| description: "AbourPage - Error server version N/A", |
Copilot
AI
Oct 11, 2025
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Corrected spelling of 'AbourPage' to 'AboutPage'.
| description: "AbourPage - Error server version N/A", | |
| description: "AboutPage - Error server version N/A", |
|
|
||
| function handleForgotPassword(): void { | ||
| navigate("/forgot-password", { state: { something: "Incoming!" } }); | ||
| navigate({ to: "/forgot-password" }); |
Copilot
AI
Oct 11, 2025
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The original navigation call included state passing ({ state: { something: 'Incoming!' } }), but this has been removed in the migration. If this state was being used by the forgot password page, this could break functionality.
| navigate({ to: "/forgot-password" }); | |
| navigate({ to: "/forgot-password", state: { something: 'Incoming!' } }); |
|
|
||
| function handleOnAbout(): void { | ||
| navigate(aboutRoute); | ||
| navigate({ to: aboutRoute as "/version" }); |
Copilot
AI
Oct 11, 2025
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The type assertion as '/version' is unsafe as aboutRoute could be any string value. Consider using proper type checking or constraining the aboutRoute parameter to only accept valid route paths.
0d27160 to
dd4fbe8
Compare
17481ea to
0b8534d
Compare
0b8534d to
1384c67
Compare
No description provided.