反応ルータを使ってアニメーションを実装する方法4

Question

私はReact Router v4を熟読していますが、ページ間の遷移を実装するのにはいくつかの困難があります。

私は、react-addons-css-transition-groupパッケージを使用して、アニメーションを公式のリアクタの例として表示します。

<BrowserRouter> 
    <Route render={ 
    ({ location }) => (
     <ReactCSSTransitionGroup 
     transitionEnterTimeout={300} 
     transitionLeaveTimeout={300} 
     transitionName="fade" 
     > 
     <Route 
      component={LoginView} 
      exact 
      key="l" 
      location={location} 
      path="/" 
     /> 

     <Route 
      component={UnderConstructionView} 
      exact 
      key="uc" 
      location={location} 
      path="/under-construction" 
     /> 
     </ReactCSSTransitionGroup> 
    ) 
    } 
    /> 
</BrowserRouter> 

は今、UnderConstructionViewに私は私のトット彼LoginViewをとり、単純なリンク<Link to="/">home page</Link>を持っていますが、何のアニメーションは示さなかったされています

は、ここに私のルータです。

なぜ機能していないのかアドバイスを提供できる人。 私は何かを見逃しているに違いないが、私はそれを見ない。

敬具、

Answer 1

あなたはSwitch

<BrowserRouter> 
    <Route render={ 
    ({ location }) => (
     <ReactCSSTransitionGroup 
     transitionEnterTimeout={300} 
     transitionLeaveTimeout={300} 
     transitionName="fade"> 
      <Switch key={location.key}> 
      <Route 
       component={LoginView} 
       exact 
       key="l" 
       location={location} 
       path="/" /> 

      <Route 
       component={UnderConstructionView} 
       exact 
       key="uc" 
       location={location} 
       path="/under-construction" /> 
      </Switch> 
     </ReactCSSTransitionGroup> 
    ) 
    } 
    /> 
</BrowserRouter> 

で Routeコンポーネントをラップ試してみてください