React Router 4 Match kehrt zurück undefined

Question

Ich benutze Reagieren Router 4 und ich habe Probleme beim Zugriff auf die ID von einer URL mit Params. Ich habe die reaction Router 4 Dokumentation jedoch verfolgt, wenn ich console.log match.params.idCannot read property 'params' of undefined zurückgibt. Die URL enthält die ID, also bin ich verloren. Sie finden die console.log in Path: Container

Was mache ich falsch?

Pfad: 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); 

Pfad: 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; 

Pfad: 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

Sie sind nicht vorbei props von 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" />); 
    }} 
    /> 
);