加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

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" />);
    }}
  />
);

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读