OwnProps Match和Params未定義React-Router V3

Question

試圖抓住id從我的網址，這樣我可以用它來fetchData上componentDidMount 。 我也用它在組件中設置一些狀態來顯示頁面上的信息。 但是， ownProps.match和ownProps.params都是未定義的。 我已經嘗試了很多東西，我能想到的是我的/ route在事物/：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);
      }

順便說一句，ownProps通過就好了未來，當我console.log它上面。 然而，它缺少任何參與/匹配，這使得我在預期匹配之前匹配路線？ 這可能是荒謬的，因為我不能做一個嵌套的路線而不會失去我的react-router參數？

我現在已經到了這個地步，我已經開始了這么長時間以至於我失去了焦點。 轉向一些很棒的人尋求幫助！

應用程序是反應15.3，react-router v3，redux。

Answer 1

我看到你渲染“ThingContainer”，但是你的類是“Thing”。 ru使用HOC？ 你還記得把所有道具傳給孩子嗎？

例：

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

Answer 2

如果要在組件中使用，則從mapStateToProps()返回的props對象應包含ownProps.match 。 將其添加為另一個屬性，或將ownProps合並到要返回的對象中。