Reactjs 如何使用API中的数据在react上创建第二个组件并创建动态URL

我有一个显示blogpost列表的组件，我为每个来自标题的帖子创建了一个URL，变成一个字符串，然后拆分和连接，但是我需要创建第二个组件来呈现blogpost本身的页面， 我的问题是，是否有任何方法可以将状态或道具从已经创建的列表组件传递到blogpost组件，并且只能通过该rout URL访问

这是我想用来将状态传输到其他组件的blogdata组件，但只有一个组件在工作，将数据从API提取到this.state.blogpost

class BlogData extends Component{
   state = {
        blogData: []        
    }
    componentDidMount() {
        axios.get(`data.json`)
          .then(res => {      
            const blogData = [res.data.blogPosts]       ;
            this.setState({blogData});                        
          })          
    };
    render(){
        const blogData = this.state.blogData.map((value) =>
            value.map((val, idx) =>                                                       
                <BlogBlock 
                    link={val.title.toString().toLowerCase().split(" ").join("-")} 
                    title={val.title}
                    subtitle={val.subtitle}
                    thumb={val.thumb}
                    idx={idx}
                />

            )
        )            
        return( 
            <section id="blog" className="blogList">
                <h2>From the Blog</h2>
                <div className="blogPosts">   
                    {blogData}              
                </div>            
            </section>
        )
    }    
}

const BlogBlock = (props) => {                
    return (
        <div className={`blog-post post-${props.idx}`}>
            <Link to={props.link}>
                <Img loader={<span className="loading-img">loading....</span>} src={`http://brittdepetter.com/images/${props.thumb}`} alt={props.title} />
                <h3>{props.title}<span><br />{props.subtitle}</span></h3>
            </Link>  
        </div>                        
    )   
}

类BlogData扩展组件{
状态={
博客数据：[]
}
componentDidMount（）{
get（`data.json`）
.然后（res=>{
const blogData=[res.data.blogPosts]；
this.setState（{blogData}）；
})          
};
render（）{
const blogData=this.state.blogData.map（（值）=>
value.map（（val，idx）=>
)
)            
报税表（
从博客
{blogData}
)
}    
}
常量BlogBlock=（道具）=>{
返回(
{props.title}
{props.subtitle}
)   
}

我试图创建但不起作用的组件是这个，但没有使路线起作用的锁：（

constblogpost=（道具）=>{
报税表（
)   
}   
有一种方法可以在链接上传递一个额外的参数。为此，您应该将
作为对象而不是字符串传递给
属性。
更改链接

<Link to={props.link}>

另外，当您在BlogPost组件上刷新浏览器时，需要重新获取日志

<Link to={props.link}>

<Link to={{pathname:props.link, blog:props}}>

this.props.location.blog