React 路由器未在 Chrome 中的重定向上安装组件

Posted 2023-02-21

【中文标题】React 路由器未在 Chrome 中的重定向上安装组件

【英文标题】：React router not mounting component on redirect in 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 方法。

【参考方案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 安装上尝试了该应用程序，它运行良好。