我正在研究这个项目,它是 youtube 的一个实现,假设我在“/”搜索“Sia”,我得到了视频、频道、播放列表的结果,当我点击我路由到的频道项目时/channel' 与 channel 组件现在的问题是,当我在 /channel 搜索某些东西时,我应该重定向回 '/' 并使用提交的搜索词获取搜索结果。但我不知道出了什么问题,或者让 Header 组件成为 BrowserRouter 的直接子级或在每个路由组件中渲染它以及它的道具(无论如何我都是这样做的)这是一个好主意,这是通道组件和路由
class ChannelDisplay extends React.Component {
onFormSubmit = (term) => {
this.props.fetchList(term);
this.props.defaultVideo(term);
}
renderHeader() {
const {channel} = this.props
if(!channel.snippet) return <Search/>
if(channel) {
const subNum = `${Number(channel.statistics.subscriberCount).toLocaleString()}`
return (
<div className="channel">
<Header onFormSubmit={this.onFormSubmit}/>
<div className="container">
<img className="img-fluid" src={channel.brandingSettings.image.bannerImageUrl} alt={channel.snippet.title} />
<div className="d-flex flex-nowrap">
<img className="img-thumbnail img-fluid channel-img mx-2 my-2" src={channel.snippet.thumbnails.default.url} alt={channel.snippet.title} />
<div className="media-content">
<p>{channel.snippet.title}</p>
<span><i className="fab fa-youtube mr-2"></i> Subscribe {subNum}</span>
</div>
</div>
</div>
</div>
)
}
}
render() {
return this.renderHeader()
}
}
const mapStateToProps = state => {
return {channel:state.channel}
}
export default connect(mapStateToProps,{fetchList,defaultVideo})
(ChannelDisplay)
.
render() {
return (
<div>
<BrowserRouter>
<div>
<Route path="" exact component={Search} />
<Route path="/channel" exact component={ChannelDisplay} />
</div>
</BrowserRouter>
</div>
)
}
也许您应该在文件中添加history.push
或添加history.replace
提交功能Search.js
,但我认为推送是一个更好的选择,因为您将能够返回back button
到您的频道或视频或其他内容。
onFormSubmit = (term) => {
this.props.fetchList(term);
this.props.defaultVideo(term);
this.props.history.push('/');
};
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句