为react-router实现无副作用的路由动画

为react-router实现无副作用的路由动画

下面是比较常见的一种react-router动画实现方式:

<TransitionGroup>
    <CSSTransition
        key={location.key}
        classNames="fade"
        timeout={300}
        >
        <Switch location={location}>
            <Route exact path="/hsl/:h/:s/:l" component={HSL} />
            <Route exact path="/rgb/:r/:g/:b" component={RGB} />
            <Route render={() => <div>Not Found</div>} />
        </Switch>
    </CSSTransition>
</TransitionGroup>

这种方式存在一个比较严重的问题，注意上面CSSTransition传递了当前的location.key作为key，这会导致每次路由切换时整个路由组件完全重载(不是重绘)。

为了说明上面的问题，我举一个例子，假设现在存在一个列表和一个详情页，详情页作为列表的子路由，当从列表进入详情页时，由于location.key发生了改变，列表页会重载并且连续触发unmounted、mounted钩子，当你在列表页订阅了一些数据时，你会发现你在子路由中来回切换时列表在疯狂的请求数据…