Clever Geek Handbook

Response-router 4 does not update UI when <Link> is clicked

I am writing a small app with a navbar and 5 routes using react-router-dom 4.1.1

. When I click a link in the navigation bar, the URL in the Firefox address bar is updated, but the page displayed does not change. However, if I specify the subpage address 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="/" component={HomePage}></Route>
                <Route path="/classify" component={ClassifyPage}></Route>
                <Route path="/admin" component={AdminPage}></Route>
                <Route path="/users" component={UsersPage}></Route>
                <Route path="/help" component={HelpPage}></Route>
            </Switch>
        </div>
    );
}
+2


source to share


3 answers


It seems that some components like react-redux containers use connect () block updates. The problem was solved with the Router () function:

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


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

+7


source


I have the same error, but when I use withRouter nothing changes. In my case, the reason for the error is the placement of elements <Link>

in the tag <Router>

.

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


Beware of this error, it is very difficult to diagnose! To fix this, just remove the unnecessary <Router>

wrapper

+1


source


Eric Wing is almost right. Since I understand the component you are entering, you need to wrap your component with Router.

So, to fix this, you need to add:

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


source






More articles:


All Articles