OwnProps Match和Params是未定义的React-Router V3

Question

尝试id从我的网址中获取，以便可以将其用于fetchData componentDidMount。我还使用它来设置组件中的某些状态以在页面上显示信息。但是，两者ownProps.match和ownProps.params始终都无法定义。我已经尝试了很多事情，但我能想到的是我的/ route在thing /：id之前匹配，这会导致问题？

（我可以使用任何一个，但它们会失败，就像这样）。 TypeError: this.props.params is undefined TypeError: this.props.match is undefined

这是我的路线：

export default (
  <Route path="/" component={App}>
    <Route path="login" component={requireNoAuthentication(LoginView)} />
    <Route path="register" component={requireNoAuthentication(RegisterView)} />
    <Route path="home" component={HomeContainer} />
    <Route path="thing/:id" component={ThingContainer} />
    <Route path="category" component={CategoryContainer} />
    <Route path="analytics" component={requireAuthentication(Analytics)} />
    <Route path="basic" component={requireNoAuthentication(BasicContainer)} />
    <Route path="*" component={DetermineAuth(NotFound)} />
  </Route>
);

mapStateToProps在这里（我一直在注释掉，thing直到我能找出问题，所以可以忽略该问题）。我真正看到问题的地方是const {id}部分。

function mapStateToProps(state, ownProps) {
  console.log(ownProps);
  return {
    data: state.data,
    token: state.auth.token,
    loaded: state.data.loaded,
    isFetching: state.data.isFetching,
    isAuthenticated: state.auth.isAuthenticated,
    thing: state.things[ownProps.match.params.id],
  };
}

在这里，我的部分组件让我头疼。

 @connect(mapStateToProps, mapDispatchToProps)
    export class Thing extends Component {
      constructor(props) {
        super(props);
      }

      componentDidMount() {
        const { id } = this.props.match.params;
        this.fetchData();
        this.props.fetchThing(id);
      }

顺便说一句，当我console.log在上面时，ownProps进行得很好。但是，它缺少任何参数/匹配，这使我觉得这是路由匹配，而不是预期的匹配吗？不过那太荒谬了，因为我不能在不失去我的react-router参数的情况下做嵌套路由？

我现在已经开始了这么长时间，以至于我失去了重点。向一些很棒的人求助！

应用程序是React 15.3，React-Router v3，redux。

Answer 1

我看到您正在渲染“ ThingContainer”，但是您的类是“ Thing”。在何处使用HOC？您还记得将所有道具都交给孩子吗？

例：

const ThingContainer = (props) => <Thing ...props />