reactjs – 反应过渡组 – 不要给孩子们制作动画

<CSSTransitionGroup transitionName="zoom" transitionEnterTimeout={200} transitionLeaveTimeout={200}>
        <Switch key={key} location={this.props.location}>
            <Route path={this.props.match.url+"/tasks/:task_id"} component={SingleTask} key={'none'} />
            <Route slug={this.props.match.params.project_slug} path={this.props.match.url+"/"} render={(params) => (
                <ProjectIndex {...params} slug={this.props.match.params.project_slug} />
            )} key={'none'}  />
        </Switch>
    </CSSTransitionGroup>

每当任何子路线发生变化时,它也会触发动画.因此,为了解决这个问题,我使用this.props.location.pathname获取路径名,然后使用一些非常粗略的代码来获取最后一个段：

pathname = pathname.split('?')[0].split('/').filter(function (i) { return i !== ""}).slice(-1)[0];

…如果它是’任务’,’活动’或’注释,我只是将密钥设置为’noanimate'(即一些通用字符串,因此交换机不会注意到)：

switch(pathname){
        case 'tasks':
        case 'activity':
        case 'notes':
            key = 'noanimate';
            break;
        default:
            key = pathname;
            break;
    }

现在,从/ project到/ project / tasks的重定向实现了从’project’到’noanimate’的双重转换,我不确定我是不是想写一些更糟糕的字符串操作来获取最后一个或倒数第二个词,取决于它是’tasks’/’activity’/’notes’还是任何其他字符串.

是否有更好的解决方案,或者是……我们是如何做事的？