By Suthan Bala


2017-06-04 16:38:02 8 Comments

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;

5 comments

@JoGoFo 2018-11-26 06:09:00

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.

@Suthan Bala 2018-04-30 16:41:10

The order in which include the component is also important in your index.js file. BrowserRouter, Provider then the App.

ReactDOM.render(
  <BrowserRouter>
      <Provider store={store}>
          <App />
      </Provider>
  </BrowserRouter>,
  document.getElementById('app')
);

@Shubham Khatri 2017-06-04 17:34:40

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);

@Suthan Bala 2017-06-04 19:27:57

still no luck :(

@Suthan Bala 2017-06-04 20:12:58

Nvm, I had the browserhistory in the wrong location. Adjusting that fixed it.

@Zhang Bruce 2017-08-21 04:25:29

where did you adjust it, i'm have same problem, can you post a full solution?

@Larrydx 2017-09-07 03:37:22

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

@Peege151 2017-09-14 06:42:36

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).

@sperfecto 2017-06-04 16:52:32

Possibly two things:

  1. Did you import { Link } from 'react-router-dom' in your Nav.js file?

  2. Possibly Spelling/Capitalization error: You export export default routes (lower case) but import Routes from './../routes (upper case).

@Suthan Bala 2017-06-04 17:12:51

Yes I did import the Link and linked to it using it. I fixed the case issue, no luck.

Related Questions

Sponsored Content

26 Answered Questions

[SOLVED] Programmatically navigate using react router

  • 2015-06-26 17:38:51
  • George Mauer
  • 463911 View
  • 892 Score
  • 26 Answer
  • Tags:   reactjs react-router

0 Answered Questions

React Router V4, Component not updating

2 Answered Questions

[SOLVED] React Router with arguments?

1 Answered Questions

2 Answered Questions

[SOLVED] React Router or Link Not working

1 Answered Questions

[SOLVED] React Router Error related to Link To

3 Answered Questions

[SOLVED] React routing not working while manually changing URL | React-router 4

1 Answered Questions

[SOLVED] React Router URL parameters not working

Sponsored Content