浏览器导航不适用于使用 BrowserRouter 的反应路由器 v5

Question

Solved answare below

I'm building a web app with react on codesandbox. I have 2 navigational components, both functional components, one is the header and the other one in the footer. I'm using a switch to show different pages between the header and footer.

The navigation changes the URL and the switch does his job showing me the right page, the only problem is that the changes are not updating the history of the browser, or overwrites it maybe??? don't know.

I already tried coding in a button to call a function that does this:

history.goBack();

It works as it should but the browser button does not. When I navigate with the navigation menu, pages change but the back-button of the browser remains "grey"/"unclickable".

So the question is: How do I get the BROWSER navigation (forward and back button of the browser) working? I learned that BrowserHistory should take care of it without no additional code, am I wrong?

-

-- Following are just some extra info that may/may not be related/significant --

I tried using a simple Link on my navigation like this:

<Link to="/Services">Services</Link>

Also I tried using history.push like this with an onClick handler function:

const history = useHistory();
function handleChangePage(pageUrl) {
  history.push("/"+pageUrl);
}

On click event that triggers handleChangePage:

<h2 className="headBarMenuItem" onClick={() => handleChangePage( "Services")}>
 Services
</h2>

This is how I have set up the BrowserRouter and the switch inside the app component:

Index.js is set up like this:

<BrowserRouter>
  <App/>
</BrowserRouter>

App (functional component) is set up like this:

<div className="App">
  <Header />
  <div>
    <Switch>
        <Route exact path="/" component={Homepage} />
        <Route path="/Home" component={Homepage} />
        <Route
          path="/Services"
          component={InfluencerMarketingPage}
        />
        <Route path="/Contacts" component={ContactPage} />
        <Route path="/Projects" component={ProjectPage} />
    </Switch>
  </div>
  <Footer />
</div>

Footer Navigation:

<div className="footerMainMenu">
          <h4>
            <Link to="/">Home</Link>
          </h4>
          <h4>
            <Link to="/Projects">Case History</Link>
          </h4>
          <h4>
            <Link to="/Services">Services</Link>
          </h4>
          <h4>
            <Link to="/Contacts">Contacts</Link>
          </h4>
          <h4>
            <Link to="/Aboutus">About Us</Link>
          </h4>
        </div>
                          

Dependecies are: react 16.12, react-dom 16.12, react-router-dom 5.2, react-scripts 3.0.1

PS I got it working the day before posting this question by just adding react-router 5.2 as a dependency even if I didn't need it, it was working with my footer navigation. Today I added the header and noticed that the browser navigation was not working anymore, I tried removing and adding react-router as a dependency and then also tried downgrading to react-router-dom 4 but no changes. Even if I remove the new header component and do the same testing by adding and removing react-router dependency, still no changes.

Got me thinking maybe I was just dreaming yesterday - Not the case tho.

Answer 1

It looks like you don't have an actual event that triggers your handleChangePage function. Try adding that function to an onClick() on each page where ever the user would click a link to get to a new page.

Then to handle the forward and back buttons you would add

function previousPage() {
history.goBack();

and for the button

onClick={previousPage}

Same for the forward button you would use

history.goForward()

Answer 2

So i resolved my problem.

The browser buttons are now working on every device/browser, I am 99% sure that the problem was caused by having codesandbox and the full page of the app open in the same chrome window (different tabs but same window).

By opening a different window of chrome (NOT different tab) or by opening the web app page in another browser everything works just fine.

The problem is ultimately caused by some kind of conflict between codesandbox and the full page of the app in the same window of the chrome browser.

PS Looks like a very specific problem but hopefully, it is helpful to someone.