OwnProps Match和Params未定义React-Router V3

Question

Trying to grab id from my url so that I can use it to fetchData on componentDidMount . I'm also using it to set some state in the component to display information on the page. However, both ownProps.match and ownProps.params keeps coming through as undefined. I've tried a lot of things and all I can think of is that my / route is matching before thing/:id and it's causing an issue?

(I can use either and they fail like so). TypeError: this.props.params is undefined TypeError: this.props.match is undefined

Here are my routes:

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 here (I've usually been commenting out thing until I can figure out the issue so can ignore that one). Where I'm really seeing the issue is the const {id} portion.

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],
  };
}

Here's where a piece of my component that's giving me the headache.

 @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);
      }

Btw, ownProps is coming through just fine when I console.log it above. However it's missing any params/match which made me thing it was the route matching before it's intended match? That would be ridiculous though because I couldn't ever do a nested route without losing my react-router params?

I'm to the point now where I've started at it so long that I'm losing focus. Turning to some wonderful person for help!

Application is react 15.3, react-router v3, redux.

Answer 1

I see that you r rendering "ThingContainer" but ur class is an "Thing". Where ru using a HOC? Did you remember to pass all the props to the child ?

Example:

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

Answer 2

The props object returned from mapStateToProps() should include ownProps.match if you want to use it in your component. Either add it as another property, or merge ownProps into the object being returned.