React Router 4でPropTypes isRequired params prop

Question

静的propTypeで必要な文字列値として設定したいmatch> paramsオブジェクトに、Reactルータから渡された小道具を持っています。 photo：PropTypes.string.isRequiredと設定するとエラーが発生します。

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

私がルータの小道具を経由して来るもののログを見ると、私は写真が文字列idであることがわかります。

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

写真に必要なタイプのバリデーションはありますか？

これは私の設定です。

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

チェック写真を入力するには、React Routerから来ている場合は、それが一致すると予想するように小道具を交換する必要があります。例えば

私はprops.match.params.name私proptypesに をチェックすると入力したい場合は、次のようになります。

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