0

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 番目のブロックが機能するのはなぜですか? :/

4

0 に答える 0