Reactjs 单击按钮时响应路由器更改转换名称

我已将CSSTRANSITIONGROUP添加到React路由器以创建页面转换。现在，我想有不同的过渡，基于我点击的链接。 例如：我总是想使用“淡入淡出”，除了当我点击“工作”按钮时，然后我想使用“滑入淡出”。 我正在使用React Router 4和来自的正常React动画附加组件

我的应用程序组件与我的路由器和转换如下所示：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Route, Switch } from 'react-router-dom';
import { Provider } from 'react-redux';
import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup' // ES6
import { ConnectedRouter } from 'react-router-redux';

import createHistory from 'history/createBrowserHistory';

const history = createHistory();

import Home from '../containers/Home';
import Work from '../containers/Work';
import BTS from '../containers/BTS';
import SinglePage from '../containers/SinglePage';
import NotFound from '../containers/NotFound';
import store from '../store';

export default class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <ConnectedRouter history={history}>
          <Route render={({ location }) => (
            <CSSTransitionGroup
              transitionName="fade"
              transitionEnterTimeout={500}
              transitionLeaveTimeout={300}>
              <Switch key={location.key} location={location}>
                <Route exact path="/" component={Home}/>
                <Route exact path="/work" component={Work}/>
                <Route exact path="/behind-the-scenes" component={BTS}/>
                <Route path="/about" component={SinglePage}/>
                <Route component={NotFound}/>
              </Switch>
            </CSSTransitionGroup>
          )}/>
        </ConnectedRouter>
      </Provider>
    );
  }
}

import React，{Component}来自'React'；
从“react dom”导入react dom；
从“react router dom”导入{Route，Switch}；
从'react redux'导入{Provider}；
从'react transition group/CSSTransitionGroup'//ES6导入CSSTransitionGroup
从“react router redux”导入{ConnectedRouter}；
从“历史记录/createBrowserHistory”导入createHistory；
const history=createHistory（）；
从“../containers/Home”导入Home；
从“../containers/Work”导入工作；
从“../containers/BTS”导入基站；
从“../containers/SinglePage”导入单页；
从“../containers/NotFound”导入NotFound；
从“../store”导入存储；
导出默认类应用程序扩展组件{
render（）{
返回(
(
)}/>
);
}
}

我的主页组件只有3个简单的按钮：

import React, { Component } from 'react';
import {connect} from 'react-redux';
import { Link, withRouter } from 'react-router-dom';

export default class Home extends Component{

  render() {
    return(
      <div className="home page">
        <main>
              <ul>
                <li><Link to="/work">Work</Link></li>
                <li><Link to="/behind-the-scenes">behind the scenes</Link></li>
                <li><Link to="/3eBtn">3e Btn</Link></li>
              </ul>
        </main>
      </div>
    )
  }
}

import React，{Component}来自'React'；
从'react redux'导入{connect}；
从“react router dom”导入{Link，withRouter}；
导出默认类Home extends组件{
render（）{
返回(

工作
幕后
3e Btn

)
}
}

所以它总是使用淡入淡出，因为我调用了

transitionName=“淡入淡出”

，但我想在单击“/work”链接时调用“SlideLeft”。

试试这个：

将条件置于

transitionName

的值上，当位置为

work

时，然后分配

SlideLeft

，否则

fade

<CSSTransitionGroup 
    transitionName={location.pathName == "work" ? "SlideLeft" : "fade"}

---

嗯，这是一个聪明的方法。但如果我从菜单转到“工作”链接，我希望它淡出。当我单击特定按钮时，它只需执行其他转换。这可能吗？对此不确定，但您可以通过设置以下条件来尝试：）