[v6] Browser back/forward buttons not updating Route

Reizar commented 3 years ago

Version

"react-router": "^6.0.0-beta.0", "react-router-dom": "^6.0.0-beta.0", "react": "^17.0.0", "react-dom": "^17.0.0",

Test Case

( This is basically a snippet of the code from my app showing how I'm laying out my routes ).

import React from 'react';

import {Routes, Route, BrowserRouter} from 'react-router-dom';

import LoginPage from 'pages/auth/LoginPage';
import RegisterPage from 'pages/auth/RegisterPage'

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="auth">
          <Route path="login" element={<LoginPage />} />
          <Route path="register" element={<RegisterPage />} />
        </Route>
      </Routes>
    </BrowserRouter>
  )
}

Steps to reproduce

Go to /auth/login ( Login page is loaded ).
Click a link to register page ( <Link to="/auth/register">Register</Link>). Register page is then loaded ( and url is updated to /auth/register
Click browser back button

Expected Behavior

Page should be navigated back to LoginPage

Actual Behavior

Browser address bar is updated to /auth/login, however the page does not update with LoginPage content.
This applies to the forward button too, the address bar gets updated, but the page content does not change.

Other notes

Navigations using useNavigate() and Link components all work fine and as intended.
Just the browser back / forward buttons don't.
I've tried in Brave and Safari.
Seems like a similar issue to this: https://github.com/ReactTraining/react-router/issues/7398 However it doesn't work for me in both dev and production.
Sometimes when clicking the back / forward buttons, the page may jump a bit in its scroll position ( the content itself does not change though ). However this is inconsistent.

timdorr commented 3 years ago

Unless you can share the actual repo or a reproduction in Codesandbox, this is almost definitely caused by something external to the library (build system, another library, browser extension, etc).

smriti-spotnana commented 3 years ago

Were you able to fix the issue @Reizar ? - I am also facing the same issue

Reizar commented 3 years ago

Were you able to fix the issue @Reizar ? - I am also facing the same issue

@smriti-spotnana Yes I was. timdorr was 100% correct and this was a problem in my own codebase. Took a fair bit of digging, but there was some shared code with our react native codebase that was interferring and causing the problem. I think it's highly specific to my codebase, so not to sure if it could really help you sorry.

mbellary-chwy commented 3 years ago

Were you able to fix the issue @Reizar ? - I am also facing the same issue

@smriti-spotnana Yes I was. timdorr was 100% correct and this was a problem in my own codebase. Took a fair bit of digging, but there was some shared code with our react native codebase that was interferring and causing the problem. I think it's highly specific to my codebase, so not to sure if it could really help you sorry.

@Reizar - i am facing same issue. Can you share the root cause of the issue, that would be helpful for me to debug

Reizar commented 3 years ago

Were you able to fix the issue @Reizar ? - I am also facing the same issue

@smriti-spotnana Yes I was. timdorr was 100% correct and this was a problem in my own codebase. Took a fair bit of digging, but there was some shared code with our react native codebase that was interferring and causing the problem. I think it's highly specific to my codebase, so not to sure if it could really help you sorry.

@Reizar - i am facing same issue. Can you share the root cause of the issue, that would be helpful for me to debug

@mbellary-chwy Sure thing, basically I had copy pasted a lot of shared code originally written for our React Native codebase. Both our React and React Native codebases make use of the ActionCable JS library from rails.

In order to get that library to work in React Native, I add to add these lines of code:

global.addEventListener = () => {};
global.removeEventListener = () => {};

When adding our action cable related code into the React project, I had forgotten to remove them. Which of course broke things. As soon as I removed these lines from our React project, react router started working properly again. ( Kinda obvious as to why it would break things, but they were hidden a fair bit down in the project and took a little bit of debugging to uncover ).

Not sure if this helps at all for you, but hopefully its of some use.

101Amine commented 2 years ago

Same problem here, any fix or i should just downgrade it to v5?

ad9999 commented 1 year ago

Is anyone facing this issue ? and was able to solve it.

The problem for me is that the page/component throws an error resulting in a completely empty page. When clicking Back from the Browser changes the route but it doesn't render the component.

mnik01 commented 1 year ago

Facing this issue

adil62 commented 1 year ago

@ad9999 Where you able to solve the issue? if you did can you please share the solution, thanks.

remix-run / react-router