React-router-dom 重定向问题

伊斯兰 G. 阿卜杜勒卡德尔

我正在研究这个项目,它是 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>
    )
}

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

马里奥·罗齐奇

也许您应该文件中添加history.push添加history.replace提交功能Search.js,但我认为推送是一个更好的选择,因为您将能够返回back button到您的频道或视频或其他内容。

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

react-router-dom嵌套的路由和重定向

来自分类Dev

React Router Dom的<Switch>问题

来自分类Dev

ReactJS - 关于 react-router-dom 的问题

来自分类Dev

使用 React Router 重定向

来自分类Dev

使用react-router-dom V5完成操作后重定向。

来自分类Dev

React Router (Dom) v4 在输入时重定向到不同的路由回车键

来自分类Dev

React Router Dom 受保护的路由在刷新页面期间始终重定向到登录

来自分类Dev

使用React-Router尝试根据state重定向用户时遇到问题

来自分类Dev

如何使用React Router的重定向功能?

来自分类Dev

使用React Router组件进行重定向

来自分类Dev

当我使用从react-router-dom重定向时,出现TypeError:func.apply不是一个函数。我是新来的反应者

来自分类Dev

使用react-router登录后自动重定向

来自分类Dev

React Router-尝试在重定向上加载_ = _

来自分类Dev

react-router>重定向不起作用

来自分类Dev

如何使用react-router重定向并发送消息

来自分类Dev

redux如何使用react-router在componentWillMount上重定向

来自分类Dev

在react-router 2.4.0中重定向willTransitionTo?

来自分类Dev

使用备用路由配置进行React Router重定向

来自分类Dev

使用react-router重定向表单提交

来自分类Dev

React-router browserHistory.push不重定向

来自分类Dev

使用React Router重定向后重新渲染组件

来自分类Dev

以编程方式将重定向添加到React Router

来自分类Dev

React Router-基于身份验证的重定向

来自分类Dev

从Modal中的onClick重定向React Router路由

来自分类Dev

使用react-router重定向表单提交

来自分类Dev

React Router默认路由重定向到/ home

来自分类Dev

React Router-尝试在重定向上加载_ = _

来自分类Dev

react-router>重定向不起作用

来自分类Dev

React-Router:无法从/重定向到/ home

Related 相关文章

  1. 1

    react-router-dom嵌套的路由和重定向

  2. 2

    React Router Dom的<Switch>问题

  3. 3

    ReactJS - 关于 react-router-dom 的问题

  4. 4

    使用 React Router 重定向

  5. 5

    使用react-router-dom V5完成操作后重定向。

  6. 6

    React Router (Dom) v4 在输入时重定向到不同的路由回车键

  7. 7

    React Router Dom 受保护的路由在刷新页面期间始终重定向到登录

  8. 8

    使用React-Router尝试根据state重定向用户时遇到问题

  9. 9

    如何使用React Router的重定向功能?

  10. 10

    使用React Router组件进行重定向

  11. 11

    当我使用从react-router-dom重定向时,出现TypeError:func.apply不是一个函数。我是新来的反应者

  12. 12

    使用react-router登录后自动重定向

  13. 13

    React Router-尝试在重定向上加载_ = _

  14. 14

    react-router>重定向不起作用

  15. 15

    如何使用react-router重定向并发送消息

  16. 16

    redux如何使用react-router在componentWillMount上重定向

  17. 17

    在react-router 2.4.0中重定向willTransitionTo?

  18. 18

    使用备用路由配置进行React Router重定向

  19. 19

    使用react-router重定向表单提交

  20. 20

    React-router browserHistory.push不重定向

  21. 21

    使用React Router重定向后重新渲染组件

  22. 22

    以编程方式将重定向添加到React Router

  23. 23

    React Router-基于身份验证的重定向

  24. 24

    从Modal中的onClick重定向React Router路由

  25. 25

    使用react-router重定向表单提交

  26. 26

    React Router默认路由重定向到/ home

  27. 27

    React Router-尝试在重定向上加载_ = _

  28. 28

    react-router>重定向不起作用

  29. 29

    React-Router:无法从/重定向到/ home

热门标签

归档