reactjs - React Router 4 Match返回未定义

我正在使用React Router 4，但在使用params从URL访问id时遇到问题。我遵循了React Router 4文档，但是当我console.log match.params.id时，它返回Cannot read property 'params' of undefined。该网址包含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);

最佳答案

您没有从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" />);
    }}
  />
);

关于reactjs - React Router 4 Match返回未定义，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45580314/

router

reactjs - React Router 4 Match返回未定义