ReactJS - Props not been pass to component

Question

I have an application with react-router-dom, connected-react-router and react-redux, I have all of them updated to the latest stable version available.

Right now for some reason, the store is not being passed to the children component of ConnectedRoute.

package.json

{
  ...,
  "connected-react-router": "^6.3.2",
  "react-redux": "^6.0.1",
  "react-router-dom": "^4.3.1",
  ...,
}

reducer.js

export default history => combineReducers({
  router: connectRouter(history),
  agent,
  ...,
});

configureStore.js

export const history = createBrowserHistory();

const initialState = {};
const enhancers = [];
const middleware = [apiAuthInjector, promise, thunk, routerMiddleware(history), logger];

if (process.env.NODE_ENV === 'development') {
  const devToolsExtension = window.__REDUX_DEVTOOLS_EXTENSION__;

  if (typeof devToolsExtension === 'function') {
    enhancers.push(devToolsExtension());
  }
}

const composedEnhancers = compose(
  applyMiddleware(...middleware),
  ...enhancers,
);

const store = createStore(createRootReducer(history), initialState, composedEnhancers);

export default store;

App.js

class App extends Component {
  componentDidMount() {
    const { onSetSession } = this.props;
    const username = Cookies.get('username');
    const token = Cookies.get('token');
    username && token && onSetSession({ username, token });
  }

  render() {
    return (
      <Switch>
        <PrivateRoute exact path="/" component={Funnel} />
        <Route exact path="/login" component={Login} />
      </Switch>
    );
  }
}

export default App;

Index.js

render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <App />
    </ConnectedRouter>
  </Provider>,
  document.querySelector('#root'),
);

PrivateRoute.js

class PrivateRoute extends React.Component {
  componentDidMount() {
    const { username, token, isFetching, onValidateSession } = this.props;
    !isFetching && onValidateSession({ username, token });
  }

  render() {
    const { username, component: Component, ...rest } = this.props;
    return (
      <Route
        {...rest}
        render={props => (username ? (
          <Component {...props} />
        ) : (
          <Redirect
            to={{
              pathname: '/login',
              state: { from: props.location },
              search: props.location.search,
            }}
          />
        ))
        }
      />
    );
  }
}

export default PrivateRoute;

PrivateRouteContainer.js

import { connect } from 'react-redux';

import { validateSession } from 'actions/agent';

import PrivateRoute from './PrivateRoute';

const mapStateToProps = ({ agent }) => ({ ...agent });

const mapDispatchToProps = dispatch => ({
  onValidateSession: payload => dispatch(validateSession(payload)),
});

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(PrivateRoute);

Do you guys have any idea of what I am doing wrong with this setup? It looks like what they described in their docs but when I console.log(this.props) I am only getting history related props and nothing else.

Answer 1

You didn't connect the component with redux store like this

const mapStateToProps = state => ({
  pathname: state.router.location.pathname,
  search: state.router.location.search,
  hash: state.router.location.hash,
});

export default connect(mapStateToProps)(PrivateRoute);