javascript - react-router 4 doesn't update UI when clicking <Link> - Stack Overflow

I am writing a small app with a navigation bar and 5 routes using react-router-dom 4.1.1. When I click on a link in the navigation bar, the URL in the Firefox address bar updates, but the page displayed does not change. However, if I enter the address of a subpage in the address bar, the correct page is displayed.

app.js:

render(
    <Provider store={store}>
        <HashRouter>
            <MainContainer />
        </HashRouter>
    </Provider>,
    document.querySelector('.app')
);

Main.js:

render() {
    return (
        <div className="main">
            <Message message= {this.props.message} />
            <NavigationBar />
            <Switch>
                <Route exact path="/" ponent={HomePage}></Route>
                <Route path="/classify" ponent={ClassifyPage}></Route>
                <Route path="/admin" ponent={AdminPage}></Route>
                <Route path="/users" ponent={UsersPage}></Route>
                <Route path="/help" ponent={HelpPage}></Route>
            </Switch>
        </div>
    );
}

I am writing a small app with a navigation bar and 5 routes using react-router-dom 4.1.1. When I click on a link in the navigation bar, the URL in the Firefox address bar updates, but the page displayed does not change. However, if I enter the address of a subpage in the address bar, the correct page is displayed.

app.js:

render(
    <Provider store={store}>
        <HashRouter>
            <MainContainer />
        </HashRouter>
    </Provider>,
    document.querySelector('.app')
);

Main.js:

render() {
    return (
        <div className="main">
            <Message message= {this.props.message} />
            <NavigationBar />
            <Switch>
                <Route exact path="/" ponent={HomePage}></Route>
                <Route path="/classify" ponent={ClassifyPage}></Route>
                <Route path="/admin" ponent={AdminPage}></Route>
                <Route path="/users" ponent={UsersPage}></Route>
                <Route path="/help" ponent={HelpPage}></Route>
            </Switch>
        </div>
    );
}

• javascript
• reactjs
• react-router-v4

Share Follow edited Jun 29, 2017 at 11:27 Mayank Shukla 105k1919 gold badges162162 silver badges145145 bronze badges asked Jun 29, 2017 at 11:14 ErikWiErikWi 50655 silver badges1111 bronze badges 1

• can you share your navbar ? – laltin Commented Jun 29, 2017 at 11:17

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

It seems some ponents, like react-redux containers using connect(), block updates. The problem was solved using withRouter():

const MainContainer = withRouter(connect(
        mapStateToProps,
        mapDispatchToProps
      )(Main));

Documentation: https://github./ReactTraining/react-router/blob/master/packages/react-router/docs/api/withRouter.md

I have the same error, but when I use withRouter, nothing changes. In my case, the reason of error is putting the <Link> elements into the <Router> tag.

<Router>
<Link to="something"></Link>
</Router>

Beware of that error, is very hard to diagnose! To fix this, just remove unneccesary <Router> wrapper

Erik Winge almost the right. As I understand ponent where you enter you need to wrap your Component with withRouter.

So, to fix this you need to add:

...
Main = withRouter(Main);
...
export default Main;
...