Glatte Übergänge zwischen den Seiten - Reactjs

Question

Ich möchte nur glatte Übergänge zwischen allen Seiten hinzufügen. Ich habe ReactCSSTransitionGroup verwendet und das Hauptlayout umgebrochen. Genau so

class MainLayout extends Component { 
    render() { 
    return (
     <div> 
     <TopNav /> 
      <ReactCSSTransitionGroup 
      transitionName="example" 
      transitionEnterTimeout={500} 
      transitionLeaveTimeout={300} 
      transitionAppear={true} 
      transitionAppearTimeout={500} 
      > 
      {/* Content */} 
      { this.props.content } 
      </ReactCSSTransitionGroup> 
     <BottomNav /> 
     </div> 
    ); 
    } 
} 

Hier ist meine Route Konfiguration.

import React from 'react'; 
    import { mount } from 'react-mounter'; 
    import MainLayout from './layouts/MainLayout.jsx'; 
    import Home from './home/Home.jsx'; 

FlowRouter.route('/', { 
    name: 'home', 
    action() { 
    mount(MainLayout, { content: (<Home />) }); 
    setTitle(); 
    }, 
}); 

Jetzt funktioniert es gut, wenn die erste Ladung. Der Übergang funktioniert jedoch nicht, wenn Sie zu anderen Seiten navigieren. Wie kann ich das lösen?

Answer 1

Sie sollten die Kinder machen, indem sie das Klonen und es einen Schlüssel geben, wie diese

{React.cloneElement(this.props.children, { 
    key: this.props.location.pathname 
})} 

Nach der example Komponente von reagieren-Router