反應路由器4匹配返回undefined

Question

我正在使用反應路由器4，我無法使用參數從URL訪問id。我遵循反應路由器4文檔，但是當我console.log match.params.id它返回Cannot read property 'params' of undefined。該URL包含該ID，所以我迷路了。你可以在Path: Container找到console.log

我在做什麼錯？

路徑：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); 

路徑：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; 

路徑：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

你不及格props從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" />); 
    }} 
    /> 
);