React-router-dom 重定向问题答案

【问题标题】：React-router-dom redirect issueReact-router-dom 重定向问题
【发布时间】：2019-06-28 08:28:22
【问题描述】：

我正在做这个项目，它是 youtube 的一个实现，假设我搜索“Sia”，例如在“/”，我得到带有视频、频道、播放列表的结果，当我点击频道项目时，我使用频道组件路由到“/频道”现在的问题是，当我在/频道搜索某些内容时，我应该重定向回“/”并使用提交的搜索词获取搜索结果。但我不知道出了什么问题，或者如果让 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>
    )
}

完整代码https://github.com/IslamGamal88/minitube

【问题讨论】：

标签： javascript reactjs react-redux react-router-dom

【解决方案1】：

也许您应该在Search.js 文件中的提交函数中添加history.push 或history.replace，但我认为推送是一个更好的选择，因为您可以使用back button 返回您的频道或视频什么的。

onFormSubmit = (term) => {
    this.props.fetchList(term);
    this.props.defaultVideo(term);
    this.props.history.push('/');
};

【讨论】：

MB 将 '/' 添加到路径属性中， ??
它们基本相同。