Next JS doesn't navigate correctly on press of mobile back button
I just created a website using Next js 13 (with app router) and Mantine UI (for front end).
On mobile, I'm displaying a responsive menu in the homepage. When I navigate to the dashboard from one of my links in the Modal/Drawer menu, I am unable to return back to the homepage by pressing the back button on mobile.
When I press the back button on mobile, I see the homepage for a moment and almost immediately I'm redirected back to the dashboard. (The url also changes)
However, if I try to navigate using links to the dashboard (without pressing the mobile back button), there is no issue. The 4 cards in the homepage also navigate to the dashboard, but this problem doesn't occur.
This is happening only on mobile devices. Everything works fine on desktop (even in mobile responsive mode). Also works on mobile if you use the desktop version.
Here's the link to the hosted website on Netlify - https://talentelly.netlify.app/
Steps to reproduce-
- Access the website from a mobile device. Click on the hamburger icon in the top right corner to open the navigation drawer menu.
- Click on the green Sign Up button and you will be redirected to the dashboard.
- Now click the mobile back button. You will notice that you are immediately redirected to the dashboard again. (If this doesn't happen immediately, just scroll or perform some activity in the page.)
This is the codebase/file structure for my application-
HeaderMegaMenu component-
Any help is appreciated!
I just upgraded the next version to v13.5.3, and this problem finally no longer occurs.
- Clear clipboard to prohibit unauthorised copying, insert message?
- Supplying a reason for AbortController?
- Can you render a html file into a container?
- Using performance.mark() with Chrome dev tools performance tab
- How to save javascript array as redis list
- Find out whether Chrome console is open
- How to wait for requests and validate responses using playwright?
- Show Bootstrap Alert on Button Click via Javascript / jQuery
- How to post a file from a form with Axios
- Why doesn't Javascript handle divide by zero error in a try catch
- how can I add menu button in telegram bot
- Debounce in ReactJS
- Javascript question mark operator, multiple question marks
- Could not find a declaration file for module '@hookform/resolvers/zod'
- Stripe CLI trigger subscription failed event for a specifc customer
- Steps to send a https request to a rest service in Node js
- react jest confirming snapshot change
- Getting a list of all countries to using npm countries-list
- How do you limit the number of options selected in an HTML <select> element?
- Different sorting
- add an event listener on an element I've created in javascript
- Web Component not rendering when loaded from UNPKG CDN?
- Uncaught TypeError: Failed to resolve module specifier "react-router-dom". Relative references must start with either "/", "./", or "../"
- Javascript Date - set just the date, ignoring time?
- Form validate() method is not working with Vue 3 and Vuetify 3
- Running V8 Javascript Engine Standalone
- PHP - Extract frame during Video upload
- Can a PWA app be published to app store and play store
- How to check if a caught exception was thrown because of triggering an AbortController?
- Apollo Client: retrieving the results from a query with errors