FEATURE: Implement Automatic Redirect for Invalid URLs

[RachitSahu26]

Is there an existing issue raised for this?

• [X] I have searched the existing issues

Describe the feature

Currently, users may encounter confusion when they attempt to access an invalid URL on the website, as it leads to a 404 error page without any guidance. To enhance user experience, I propose implementing an automatic redirect feature that directs users to a designated page when they enter a wrong URL.

Component

1. Identify the Routing Structure Review the existing routing setup in your App.js file. You have routes defined for various components, including a catch-all route (<Route path="*" element={} />) for handling 404 errors.
2. Decide on the Redirect Logic You want to redirect users from any invalid URL to either the Homepage or a custom 404 error page. In your current setup, the component acts as the custom 404 error page.
3. Implementing Redirect Behavior Instead of just showing the Not Found page, you can modify the behavior of this component to automatically redirect the user after a few seconds or immediately upon loading. In the component, you can use the useEffect hook to trigger the redirection.
4. User Experience Consideration You might want to provide feedback to the user that they are being redirected. This can be done by displaying a message on the Not Found page that informs them they will be taken back to the homepage.
5. Logging Invalid Access Attempts If you want to log invalid URL attempts for analytics or monitoring, consider adding logic in the component or in a central error-handling function that records the attempted URL.
6. Testing After implementing the redirect, test the application by entering various invalid URLs to ensure that the redirection works correctly and that users receive the appropriate messages.

It should be implemented because

Redirect Logic: Implement logic to detect invalid URLs and automatically redirect users to a specified page, such as the homepage or a custom 404 error page. User-Friendly Message: On the redirected page, display a clear message indicating that the original URL was not found, along with links to popular sections of the site. Logging Invalid Access Attempts: Optionally, log invalid URL attempts for analysis and improvements in site navigation. Expected Behavior:

Would you like to work on this issue?

Yes

Terms & Conditions

• [X] I agree to follow the Code of Conduct
• [X] I'm a GSSOC'24 Ext contributor

[github-actions[bot]]

👋 Thank you @RachitSahu26 for raising an issue! We appreciate your effort in helping us improve. Our team will review it shortly. Stay tuned!

[RachitSahu26]

https://github.com/user-attachments/assets/1854bb2f-f65c-45b0-a499-f773bcc988db

i wanna make like this