ADORSYS-GIS / ADORSYS-GIS/webank-UserApp

Optimize React Router Setup for Improved Performance and Scalability

Open
#336 0 comments 0 reactions 1 assignee Claimed by @Koufan-De-King View on GitHub
Dominant language
TypeScript
Stars
5
Forks
0
PR merge metrics
No merged PRs in 30d

Description

### Description

### Description:

Refactor the React Router configuration to:

* Group related routes into logical modules for better organization and maintainability.
* Implement lazy loading for all route components to enable code splitting and reduce initial bundle size.
* Add a centralized error route to handle unmatched paths with proper redirection or error display.
* Ensure the routing setup supports easy scalability for future feature additions.

This optimization will improve app load times, simplify route management, and enhance overall code quality.

### Acceptance Criteria:

* [ ] Routes are organized into separate modules based on feature areas (e.g., auth, KYC, QR scanning).
```code
πŸ“ src
β”œβ”€β”€ πŸ“ layouts
β”‚ └── AppLayout.tsx # Main layout component that wraps pages and renders nested routes
β”œβ”€β”€ πŸ“ router
β”‚ β”œβ”€β”€ index.tsx # Main router setup, combines all route groups into a single router
β”‚ └── πŸ“ routes # Folder containing grouped route definitions by feature area
β”‚ β”œβ”€β”€ authRoutes.ts
β”‚ β”œβ”€β”€ kycRoutes.ts
β”‚ β”œβ”€β”€ qrRoutes.ts
β”‚ β”œβ”€β”€ coreRoutes.ts
β”‚ └── errorRoutes.ts
````
* [ ] All route components are loaded lazily with dynamic imports.
* [ ] A global fallback UI is displayed during lazy loading of components.
* [ ] A catch-all error route properly handles unmatched URLs by redirecting or showing a 404 page.
* [ ] Route configuration is scalable and easy to extend with new routes.
* [ ] No regressions in navigation or page rendering behavior after refactor.

### Suggested Subtasks:

1. **Modularize routes:** Separate route definitions into multiple files grouped by feature.
2. **Implement lazy loading:** Convert all route components to use dynamic imports with lazy loading.
3. **Add global fallback:** Implement a global loading indicator that shows while components load.
4. **Configure error route:** Add a catch-all route to handle 404s gracefully.
5. **Test routing:** Verify all routes render correctly and lazy loading works as expected.
6. **Documentation:** Update routing docs with the new structure and guidelines.

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.