Question

我使用的是反应路由器v4.2，它看起来像Switch内部的Redirect不会触发组件安装。我没有使用任何状态管理库，所以它只是纯粹的反应代码而且bug看起来只发生在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;

如果我输入带有'/'的网址网址，则所提供的网址（/entries/voto）会显示在浏览器中，但是没有调用生命周期方法，甚至不是构造函数，所以我相信没有任何内容取决于{ {1}}组件，它不实现EntryList方法。

Answer 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。在某些情况下它很有帮助

Answer 2

我有类似的问题。就我而言，我必须将Redirect元素放在Route元素之后。

这样的东西可以在我的应用中使用。

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

Answer 3

谢谢大家，但它看起来像是Chrome缓存问题！我在隐身模式和全新的Chrome安装上试用了应用程序，它运行良好。

在Chrome中重定向时，React路由器不安装组件

3 个答案: