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.