React Router 4 Match returns undefined

Question

I'm using react router 4 and I'm having trouble accessing the id from a url using params. I've followed the react router 4 documentation however when I console.log match.params.id it returns Cannot read property 'params' of undefined. The URL contains the id so I'm lost. You can find the console.log in Path: Container

What am I doing wrong?

Path: App

const App = appProps => (
 <Router>
 <div className="bgColor">
 <NavBar {...appProps} />
 <Grid className="main-page-container">
 <Switch>
 <Admin exact path="/admin/candidate_profile/:id" component={AdminCandidateProfileContainer} {...appProps} />
 </Switch>
 </Grid>
 </div>
</Router>
);
App.propTypes = {
 loggingIn: PropTypes.bool,
 authenticatedCandidate: PropTypes.bool,
 authenticatedAdmin: PropTypes.bool
};
export default createContainer(() => {
 const loggingIn = Meteor.loggingIn();
 return {
 loggingIn,
 authenticatedCandidate: !loggingIn && !!Meteor.userId() && !!Roles.userIsInRole(Meteor.userId(), 'Candidate'),
 authenticatedAdmin: !loggingIn && !!Meteor.userId() && !!Roles.userIsInRole(Meteor.userId(), 'Admin')
 };
}, App);

Path: AdminRoute

const Admin = ({ loggingIn, authenticatedAdmin, component: Component, ...rest }) => (
 <Route
 {...rest}
 render={(props) => {
 if (loggingIn) return <div />;
 return authenticatedAdmin ?
 (<Component loggingIn={loggingIn} authenticatedAdmin={authenticatedAdmin} {...rest} />) :
 (<Redirect to="/login" />);
 }}
 />
);
Admin.propTypes = {
 loggingIn: PropTypes.bool,
 authenticatedAdmin: PropTypes.bool,
 component: PropTypes.func
};
export default Admin;

Path: Container.js

export default CandidateProfileContainer = createContainer(({ match }) => {
 console.log('match', match.params.id);
 const profileCandidateCollectionHandle = Meteor.subscribe('admin.candidateProfile');
 const loading = !profileCandidateCollectionHandle.ready();
 const profileCandidateCollection = ProfileCandidate.findOne({ userId: Meteor.userId() });
 const profileCandidateCollectionExist = !loading && !!profileCandidateCollection;
 return {
 loading,
 profileCandidateCollection,
 profileCandidateCollectionExist,
 profileCandidate: profileCandidateCollectionExist ? profileCandidateCollection : {}
 };
}, CandidateProfilePage);

Answer 1

You're not passing props from render

const Admin = ({ loggingIn, authenticatedAdmin, component: Component, ...rest }) => (
 <Route
 {...rest}
 render={(props) => {
 if (loggingIn) return <div />;
 return authenticatedAdmin ?
 (<Component 
 loggingIn={loggingIn} 
 authenticatedAdmin={authenticatedAdmin} 
 {...rest} 
 {...props} <--- match, location are here
 />) :
 (<Redirect to="/login" />);
 }}
 />
);