javascript - (react) 动态 URL，无法呈现我想要的数据

Question

我已经快到了，但仍然无法向我发送数据。

我的数据组件可以呈现博客文章列表，而我的路由器则针对索引和标题

//Blockblock.js
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}
                />            
            )
        )  

//Blockblock.js
const BlogBlock = (props) => {                
    return (
        <div className={`blog-post post-${props.idx}`}>            
            <Link to={`blog/${props.idx}/${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>                        
    )   
}
//app.js
<Route path='/blog/:blogId/:blogTitle' component={BlogPost} />    

最后我有了我的 blockpost 组件，我正在匹配 URL，但是如何传递 props 来渲染图像等数据？

BlockPost.js
const BlogPost =({match, location}) => {                   
    const { params:{ blogId, blogTitle } } = match;
    return (                          
        <div>                                        
            <h2>{ props.title }</h2> 
            <div className="textBox boxImg">
                <div className="story-img-box">
                    { props.imgsrc }
                </div>            
                <div>
                    {console.log(props)}
                    {props.body}
                </div>
            </div>
        </div>            
    )   
}
```

Answer 1

如果您尝试将其他属性从 BlogBlock 传递到 BlogPost，如果没有某种状态管理(如 Redux)，这是不可能的。其中两个组件都能够使用共享状态。

我建议根据 BlogPost 组件内的 blogId 重新获取您的博客，因为您需要处理直接访问(如果用户直接导航到 /blog/:blogId/:blogTitle 通过在 url 中输入它，而不是从 BlogBlock 中输入)。另一种选择是仅在直接访问时重新获取，否则使用共享状态中的数据(基于从将存储在该状态中的 BlogBlock 中进行的选择)。