【问题标题】:React router not mounting component on redirect in ChromeReact 路由器未在 Chrome 中的重定向上安装组件
【发布时间】:2018-05-25 02:44:14
【问题描述】:

我正在使用 react router v4.2,看起来 Switch 内部的重定向不会触发组件安装。我没有使用任何状态管理库,所以它只是纯粹的反应代码,而且这个错误看起来只发生在 chrome 中! 这是我的带有路由的应用组件:

const App = () => (
    <section id="content">
        <div className="container">
            <Switch>
                <Redirect exact from='/' to='/entries/voto'/>
                <Route path="/entries/:order" component={EntryList}/>
            </Switch>
       </div>
    </section>
)
export default App;

如果我使用 '/' 输入网站 url,则提供的 url (/entries/voto) 会显示在浏览器中,但没有调用生命周期方法,甚至没有调用构造函数,所以我相信没有任何东西依赖于 EntryList 组件,它没有实现shouldComponentUpdate 方法。

【问题讨论】:

    标签: reactjs google-chrome react-router


    【解决方案1】:

    我不确定,但你能不能把你的代码改成这样

    const App = () => (
    <section id="content">
        <div className="container">
            <Switch>
                <Redirect exact from='/' to='/entries/voto'/>
                <Route path="/entries/:order" render={ props => <EntryList {...props}/>}/>
            </Switch>
       </div>
    </section>
     )
     export default App;
    

    我更改 component 并将其替换为 render 。在某些情况下它很有帮助

    【讨论】:

    • @vittoriomaiullari 你能创建一个小提琴或jsbin吗
    • 我明天可以做,但它只发生在 Chrome 中,并且应用程序在 Chrome 匿名模式下工作,所以我想这取决于 Chrome 的行为。
    【解决方案2】:

    我遇到了类似的问题。就我而言,我必须将Redirect 元素放在Route 元素之后。

    这样的东西在我的应用程序中有效。

    return (<div>
              <Route exact path="/login" component={LoginContainer}/>
                {this.props.location.pathname !== '/login'&&
                    <Redirect exact from="/" to={"/login"} />
                }
            </div>);
    

    【讨论】:

      【解决方案3】:

      谢谢大家,但看起来这是 chrome 缓存问题!我在隐身模式和全新的 chrome 安装上尝试了该应用程序,它运行良好。

      【讨论】:

        猜你喜欢
        • 2021-08-07
        • 2020-11-25
        • 2018-08-06
        • 2017-04-24
        • 1970-01-01
        • 1970-01-01
        • 2019-07-16
        • 2018-06-09
        • 2018-08-31
        相关资源
        最近更新 更多