42

I have setup the React with react-router version 4. The routing works when I enter the URL directly on the browser, however when I click on the link, the URL changes on the browser (e.g http://localhost:8080/categories), but the content don't get updated (But if I do a refresh, it gets updated).

Below is my setup:

The Routes.js setup as follows:

import { Switch, Route } from 'react-router-dom';
import React from 'react';

// Components
import Categories from './containers/videos/Categories';
import Videos from './containers/videos/Videos';
import Home from './components/Home';

const routes = () => (
  <Switch>
    <Route exact path="/" component={Home}/>
    <Route path="/videos" component={Videos}/>
    <Route path="/categories" component={Categories}/>
  </Switch>
);

export default routes;

The link I use in Nav.js are as follows:

<Link to="/videos">Videos</Link>
<Link to="/categories">Categories</Link>

The App.js is as follows:

import React from 'react';
import './app.scss';
import Routes from './../routes';
import Nav from './Nav';

class AppComponent extends React.Component {

  render() {
    return (
      <div className="index">
        <Nav />
        <div className="container">
          <Routes />
        </div>
      </div>
    );
  }
}

AppComponent.defaultProps = {
};

export default AppComponent;
4
  • Where's your BrowserRouter
    – Andrew Li
    Commented Jun 4, 2017 at 16:43
  • 4
    Did you get your problem solved? I have exactly the same issue and I'm interested in your final solution.
    – dns_nx
    Commented Apr 27, 2018 at 8:17
  • 4
    @dns_nx The problem I had was putting in the <BrowserRouter> in the wrong place. The correct would be as in this pastebin: pastebin.com/M9hU4Bg4 Commented Apr 27, 2018 at 12:52
  • @SuthanBala - your latest commet saved me - after 6Hrs (?!) of spinning in circles. I was not using BrowseRouter at all ... just Router. Jeez ...
    – Liviu Sosu
    Commented Dec 10, 2020 at 13:12

9 Answers 9

19

I would go through your components and make sure you have only one <Router> ... </Router>. Also -- make sure you have a <Router>...</Router> There may be cases when you'd use more than one, but if you accidentally have nested routers (because you were hacking quickly and forgot to remove one when you were moving it around to all kinds of places ;-) - it could cause an issue.

I would try

import {
  BrowserRouter as Router,
}  from 'react-router-dom'

// Other Imports

...

return (
  <Router>
    <div className="index">
      <Nav /> <!-- In this component you have <Links> -->
      <div className="container">
        <Routes />
      </div>
    </div>
  </Router>
);

In your top most component (App.js).

3
  • 4
    Double <Router/> was the issue in my case.
    – Cezar D.
    Commented Feb 27, 2019 at 22:05
  • 2
    switching to Browserrouter instead of just Router worked for me! thanks
    – Max
    Commented Jul 20, 2020 at 15:08
  • This solution works for me. I used double Router in my app.
    – Joxon
    Commented Nov 3, 2020 at 2:29
15

Wrapping your component with withRouter should do the job for you. withRouter is needed for a Component that uses Link or any other Router props and doesn't receive the Router props either directly from Route or from the Parent Component

Router Props are available to the component when its called like

<Route component={App}/>

or

<Route render={(props) => <App {...props}/>}/>

or if you are placing the Links as direct children of Router tag like

<Router>
     <Link path="/">Home</Link>
</Router>

In case when you wish to write the child content within Router as a component, like

<Router>
     <App/>
</Router>

The Router props won't be available to App and hence, you could pass call it using a Route like

<Router>
     <Route component={App}/>
</Router>

However withRouter comes in Handy when you want to provide the Router props to a highly nested component. Check this solution

import {withRouter} from 'react-router'

class AppComponent extends React.Component {

  render() {
    return (
      <div className="index">
        <Nav />
        <div className="container">
          <Routes />
        </div>
      </div>
    );
  }
}

AppComponent.defaultProps = {
};

export default withRouter(AppComponent);
4
  • still no luck :( Commented Jun 4, 2017 at 19:27
  • Nvm, I had the browserhistory in the wrong location. Adjusting that fixed it. Commented Jun 4, 2017 at 20:12
  • 1
    where did you adjust it, i'm have same problem, can you post a full solution? Commented Aug 21, 2017 at 4:25
  • 1
    If using connect from react-redux, then wrap the withRouter around that connect. ex: export default withRouter(connect(mapStateToProps)(App)). Solution for that here stackoverflow.com/a/45082976/3714697 Commented Sep 7, 2017 at 3:37
5

There should be only one ROUTER in the whole app, which I think if your head file is App.js, then the ROUTER should wrap the whole App.js component.

3

I was having the exact same issue, but the cause of mine was much simpler.

In my case I had a space at the end of the URL string:

<Link to={ "/myentity/" + id + "/edit " } >Edit</Link>

Wouldn't work when I clicked on the link, but the URL would update in the address bar. Tapping on the browser address bar and hitting the enter key would then work correctly.

Removing the space fixed it:

<Link to={ "/myentity/" + id + "/edit" } >Edit</Link>

Pretty obvious I guess, but easy to overlook. A few hairs were pulled before I noticed (and clearly I ended up here), hope it saves someone else a few hairs.

1
  • Thank you! Very easily overlooked Commented Mar 16, 2019 at 11:54
1

If anyone is using the history package for navigation and if you are using the react-router v5, then you may have to downgrade the history package to 4.10.1 until the history package developers issue a new release with the fix. As of writing this, the latest release version of history package is v5.0.1, and if you see a new release than this, you can try with that version first to see if it works, before doing the downgrade to 4.10.1

0
0

I was facing this because I have not installed the react-router in the application (package.json) dependencies...

0

You should not wrap the nav-bar where your are stored in or

I also had the same issue before. The mistake was the I wrapped my navbar component inside a you should use in the main component only (App.js)

0

The answer by Hanly Nadackal is where I found my solution.

As referenced in an issue at the history package repository, v5 should not be used for react-router v5. https://github.com/remix-run/history/issues/893#issuecomment-905959905

Downgrading history at my package.json to ^4.10.1 fixed the problem.

0

React router dom v6 you need to wrap Navbar component inside router

      <Router>
        <Nav />
        <Routes>
          <Route exact path="/" element={<LandingPage />} />
          <Route exact path="projects" element={<Projects />} />
          <Route exact path="about" element={<About />} />
          <Route exact path="blog" element={<Blog />} />
        </Routes>
      </Router>
      <Footer />

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.