this.props.route を redux 経由でリダイレクトするように変更するこのコンポーネントがあります。この場合、「/aaa」から「/bbb」にリダイレクトしていますが、ページはリダイレクトされていません。
コードにconsole.logを追加してthis.props.routeが変更されるかどうかをテストし、小道具が更新されていますが、リダイレクトが機能していないようです。
基本的に、Component {aaa} は redux から this.state.route を更新します。Redux は状態を prop に伝播します。したがって、RedirectHandler コンポーネントは再レンダリングされますが、リダイレクトは起動しません。
これはうまくいきません。
RedirectHandler コンポーネント
render() {
console.log('rerender', this.props.route); 1.) '/aaa' 2.) '/bbb'
return(
{ this.props.isAuthenticated && <Redirect to={this.props.route} /> }
<Route exact path="/" component={aaa} />
<Route exact path="/aaa" component={aaa} />
<Route exact path="/bbb" component={bbb} />
)
}
これは機能しますが、
render() {
return(
{ this.props.isAuthenticated && this.props.route === '/bbb'
&& <Redirect to={this.props.route} /> }
{ this.props.isAuthenticated && <Redirect to={this.props.route} /> }
<Route exact path="/" component={aaa} />
<Route exact path="/aaa" component={aaa} />
<Route exact path="/bbb" component={bbb} />
)
}
質問は、props.route が更新されている場合に指定されたルートにリダイレクトされないのはなぜですか?
<Redirect to={this.props.route} />
また
最初のブロックが機能しないのに、2 番目のブロックが機能するのはなぜですか? :/