Props undefined setelah di refresh

 import React, { Component } from 'react';
import { Link } from "react-router-dom";

export default class blog extends Component {
    state={
        posts:this.props
    }
    render() {
        return (
            <div>
                <Link to={{pathname: '/detail/'+ this.props.episode, query: {data: this.state.posts} }}>
                    <div>
                        <h1>{this.props.title}</h1>
                        <p>Episode:{this.props.episode}</p>
                        <p>Director:{this.props.director}</p>
                        <p>Release :{this.props.release}</p>
                    </div>
                </Link>
            </div>
        );
    }
};

Ini parent component

 import React, { Component } from 'react';
// import {withRouter} from 'react-router-dom'

export default class blog_summary extends Component {
    constructor(props){
        super(props)
        this.state={
            data: this.props.location.query.data,
            characters:[],
            isLoaded:false,
        }
        this.getPeople = this.getPeople.bind(this);
    }

    getPeople(){
        const peoples = [...this.state.data.characters]
        Promise.all(peoples.map(url =>
            fetch(url).then(resp => resp.json())
        )).then(json => {
            this.setState({
                characters:json
            })
        })
    }

    componentDidMount(){
        // console.log(1, this.props.location.query.data);
        this.getPeople();
        //this.state.characters.map(item=>console.log(item))
    }

    render() {
        console.log(this.state.data)
        const { title, episode,opening_crawl } = this.state.data;
        return (
            <div>
                <div className="title">
                    <h1>{title}</h1>
                    <hr/>
                    <p>episode:{episode}</p>
                    <p>{opening_crawl}</p>
                </div>
                <div>
                    <h2>Characters</h2>
                    <hr/>
                    <ul>
                        {this.state.characters.map((items,index)=>{return (<li key={index}>{items.name} |</li>)})}
                    </ul>
                </div>
            </div>
        );
    }
};

ini child nya, masalah nya saat direfresh data nya undefined,cara panggil state parent gimana ya ?