ReactJS: Component not loaded even after URL changes

Question

After spending time with withRouter and connect methods, I'm still unable to figure out why my view isn't updating with change in URL.

When I navigate from "/" to "/about", page doesn't update, though works fine on reloading.

From React DevTools, I can see that my props.location doesn't change even after redirection. So my guess is that I have messed up the implementation of Redux somewhere.

App.js

import { bindActionCreators } from "redux";
import { connect } from "react-redux";
import { withRouter } from "react-router-dom";

import Main from "./Main";

const actionCreators = {};

function mapStateToProps(state) {
    return state;
}

function mapDispatchToProps(dispatch) {
    const actions = bindActionCreators(actionCreators);

    return { ...actions, dispatch };
}

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

export default App;

Main.js

import React from "react";

import Navbar from "./components/navbar/navbar.component";
import Footer from "./components/footer/footer.component";

const Main = props => (
    <div>
        <Navbar currentState="Home" />
        {React.cloneElement(props.children, props)}
        <Footer />
    </div>
);

export default Main;

index.js

import React from "react";

import { Provider } from "react-redux";
import { render } from "react-dom";
import { Router, Route, Switch } from "react-router";
import { withRouter } from "react-router-dom";

import store, { history } from "./store";

import App from "./App";
import Home from "./containers/home/home.component";
import AboutPage from "./containers/aboutPage/aboutPage.component";

const MOUNT_POINT = document.getElementById("root");

const router = (
    <Provider store={store}>
        <Router history={history}>
            <App>
                <Switch>
                    <Route exact path="/" component={Home} />
                    <Route path="/about" component={AboutPage} />
                </Switch>
            </App>
        </Router>
    </Provider>
);

render(
    router,
    MOUNT_POINT,
);

Though I am getting the following diff in Redux state (as below), but same is not being reflected in React State.

{
    "type": "@@router/LOCATION_CHANGE",
    "payload": {
        "pathname": "/about",
        "search": ","
        hash ":",
        "key": "wk0oya"
    }
}

I believe I have somewhere messed up linking redux with react-router. Had tried the withRouter solution credits: https://stackoverflow.com/a/45036930/2302156.

I also tried passing options to connect method from react-redux as per following API Guide:

[pure] (Boolean): If true, connect() will avoid re-renders and calls to mapStateToProps, mapDispatchToProps, and mergeProps if the relevant state/props objects remain equal based on their respective equality checks. Assumes that the wrapped component is a “pure” component and does not rely on any input or state other than its props and the selected Redux store’s state. Default value: true

My list of package dependencies:

"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-redux": "^5.0.7",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-router-redux": "^4.0.8",
"redux": "^4.0.0",
"redux-thunk": "^2.3.0"

Anyone who can help me fix this?

Answer 1

This was not working because of wrong dependency included.

Changes in index.js,

import React from "react";

import { Provider } from "react-redux";
import { render } from "react-dom";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

import store from "./store";

import App from "./App";
import Home from "./containers/home/home.component";
import AboutPage from "./containers/aboutPage/aboutPage.component";

const MOUNT_POINT = document.getElementById("root");

const router = (
    <Provider store={store}>
        <Router>
            <App>
                <Switch>
                    <Route exact path="/" component={Home} />
                    <Route path="/about" component={AboutPage} />
                </Switch>
            </App>
        </Router>
    </Provider>
);

render(
    router,
    MOUNT_POINT,
);