CODEWITHSUNDEEP
javascriptreactjsreact-reduxreact-router-dom
Islam G. Abdelkader
Islam G. Abdelkader

Reputation: 25

React-router-dom redirect issue

i'm working on this project that's an implementation of youtube, let's say i search for 'Sia' for example at '/' i get the result back with videos,channels,playlists and when i click on the channel item i route to '/channel' with the channel component now the problem is , when i search for something while at /channel i'm supposed to redirect back to '/' and get the search results with the submitted search term. but i have no idea what's going wrong or if it's a good idea wheather to make the Header component a direct child of the BrowserRouter or render it in each route component along with it's props (which what i went for anyway) here's the channel component and routing

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>
    )
}

entire code https://github.com/IslamGamal88/minitube

Upvotes: 0

Views: 92

Answers (1)

Mario Rozic
Mario Rozic

Reputation: 240

Maybe you should add history.push or history.replace into your submit function in Search.js file, but I think the push is a much better option because you will be able to go back with back button to your channel or video or something.

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

Upvotes: 1

Related Questions