reactjs – React Router 4 Match返回undefined
发布时间:2020-12-15 05:05:39 所属栏目:百科 来源:网络整理
导读:我正在使用反应路由器4,我无法使用params从URL访问id.我跟着反应路由器4文档,但是当我在console.log match.params.id时它返回无法读取未定义的属性’params’. URL包含id,所以我迷路了.您可以在Path:Container中找到console.log 我究竟做错了什么? 路径:A
我正在使用反应路由器4,我无法使用params从URL访问id.我跟着反应路由器4文档,但是当我在console.log match.params.id时它返回无法读取未定义的属性’params’. 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);
你没有从渲染中传递道具
const Admin = ({ loggingIn,...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" />); }} /> ); (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |