Переход на страницу анимации с помощью React Router и CSSTransitionGroup

Question

Я пытаюсь изучить группы перехода css с реакцией. Когда я запустил следующий код, моя страница будет исчезать.

import React from 'react'; 
import { render } from 'react-dom'; 
import { Router, Route, IndexRoute, useRouterHistory } from 'react-router'; 
import { createHistory } from 'history'; 
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; 
import Config from './Settings/Config'; 
import App from './Components/App'; 
import About from './Components/About'; 
import Career from './Components/Career'; 

const CONFIG = new Config(); 
const CORP = CONFIG.baseNameCorp; 
const LEASING = CONFIG.baseNameLeasing; 

const browserHistory = useRouterHistory(createHistory)({basename:CONFIG.baseName}) 

render((
    <ReactCSSTransitionGroup 
    transitionName="example" 
    transitionAppear={true} 
    transitionAppearTimeout={1000} 
    transitionLeaveTimeOut={1000}> 

    <Router history={browserHistory}> 
    <Route path={CORP} component={App}> 
    <Route path={CORP+"career"} component={Career} /> 
    </Route> 
    </Router> 
    </ReactCSSTransitionGroup> 
), document.getElementById('app')) 

Однако то, что я действительно хотел сделать, когда я иду от около URL в карьере URL, я хочу, чтобы о нас компоненте затухать и компоненты карьеры исчезать в, и наоборот. Поэтому я пробовал сделать этот код:

import React from 'react'; 
import { render } from 'react-dom'; 
import { Router, Route, IndexRoute, useRouterHistory } from 'react-router'; 
import { createHistory } from 'history'; 
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; 
import Config from './Settings/Config'; 
import App from './Components/App'; 
import About from './Components/About'; 
import Career from './Components/Career'; 

const CONFIG = new Config(); 
const CORP = CONFIG.baseNameCorp; 
const LEASING = CONFIG.baseNameLeasing; 

const browserHistory = useRouterHistory(createHistory)({basename:CONFIG.baseName}) 

render((
    <Router history={browserHistory}> 
    <Route path={CORP} component={App}> 
     <ReactCSSTransitionGroup 
     transitionName="example" 
     transitionAppear={true} 
     transitionAppearTimeout={1000} 
     transitionLeaveTimeOut={1000}> 
      <Route path={CORP+"about"} component={About} /> 
     </ReactCSSTransitionGroup> 
     <ReactCSSTransitionGroup 
     transitionName="example" 
     transitionAppear={true} 
     transitionAppearTimeout={1000} 
     transitionLeaveTimeOut={1000}> 
      <Route path={CORP+"career"} component={Career} /> 
     </ReactCSSTransitionGroup> 
    </Route> 
    </Router> 
), document.getElementById('app')) 

Но этот код, кажется, не имеет никакого эффекта. Когда я перехожу между URL-адресом и карьером, эти два компонента просто скрываются и показывают. Как мне получить переход на постепенный переход на работу?

Answer 1

Вы можете включить ReactCSSTransition в главном компоненте приложения и сделать переходы к своим детям, используя

class App extends React.Component { 
    render() { 
    return (
    <div> 
    <ul> 
     <li><Link to="/page1">Page 1</Link></li> 
     <li><Link to="/page2">Page 2</Link></li> 
    </ul> 

    <ReactCSSTransitionGroup 
      transitionName="example" 
      transitionAppear={true} 
      transitionAppearTimeout={1000} 
      transitionLeaveTimeOut={1000}> 
       {React.cloneElement(this.props.children, { 
        key: location.pathname 
       })} 
    </ReactCSSTransitionGroup> 
    </div> 
    ) 
    } 

} 

И тогда ваши маршруты написаны нормально.

import React from 'react'; 
import { render } from 'react-dom'; 
import { Router, Route, IndexRoute, useRouterHistory } from 'react-router'; 
import { createHistory } from 'history'; 
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; 
import Config from './Settings/Config'; 
import App from './Components/App'; 
import About from './Components/About'; 
import Career from './Components/Career'; 

const CONFIG = new Config(); 
const CORP = CONFIG.baseNameCorp; 
const LEASING = CONFIG.baseNameLeasing; 

const browserHistory = useRouterHistory(createHistory)({basename:CONFIG.baseName}) 

render((
    <Router history={browserHistory}> 
    <Route path={CORP} component={App}> 
     <Route path={CORP+"about"} component={About} /> 
     <Route path={CORP+"career"} component={Career} /> 
    </Route> 
    </Router> 
), document.getElementById('app'))