PropTypes isRequired on React Router 4 params prop

Question

I have props been passed from React router in its match > params object which I want to be set in my static propTypes as a required string value. When I set it as photo: PropTypes.string.isRequired I get an error.

Warning: Failed prop type: The prop `photo` is marked as required in `BlogEntry`, but its value is `undefined`.

When I do a log of what is coming in via the router props I can see photo is a string id.

const {match:{params:{photo}}} = this.props;
console.log("photo = ", photo);
// result: 
photo =  5a03c474e1bbc026de896aa8

Is there any way of having a required type validation on photo ?

Here is my setup.

import React, {Component} from 'react';
import {connect} from 'react-redux';
import PropTypes from 'prop-types';
import {fetchBlogEntry} from '../../actions/index';
import BlogPost from '../../components/client/blog-post';

class BlogEntry extends Component{

  constructor(props){
    super(props);
    console.log('constructor = ', this.props.match.params.photo);
  }

  static propTypes={
    entry: PropTypes.object.isRequired,
    photo: PropTypes.string.isRequired
  }

  componentWillMount(){
    const {match:{params:{photo}}} = this.props;
    console.log("photo = ", photo);
    this.props.fetchBlogEntry(photo);
  }

  render(){
    const {entry} = this.props;
    return(
      <div id='blog' className='container'>
        <BlogPost {...entry}/>
      </div>
    )
  }
}

function mapStateToProps({blog:{entry}}){
  return{
    entry
  }
}

export default connect(({blog:{entry}}) => ({entry}), {fetchBlogEntry})(BlogEntry);

Answer 1

If you want to type check photos and it comes from React Router you have to change your props to expect it to be in match.

For example if I want to type check props.match.params.name my proptypes would be:

  match: PropTypes.shape({
    params: PropTypes.shape({
      name: PropTypes.string.isRequired
    })
  }),