react-transition-group不适用于React Router

Question

我对React Transitions组有问题。由于某些原因，淡入和淡出在路由器交换机上不起作用。我已经阅读了文档并在我的应用程序中实现了它。

不知道我的代码出了什么问题。

我的React代码：

const App = () => (
    <Router>
        <Menu />
        <TransitionGroup>
            <CSSTransition
                timeout={{ enter: 300, exit: 300 }}
                classNames={'fade'}>
                <Switch>
                    {routes.map(route => (
                        <Route
                            exact
                            key={route.path}
                            path={route.path}
                            component={route.component}
                        />
                    ))}
                </Switch>
            </CSSTransition>
        </TransitionGroup>
    </Router>
);

export default App;

Css代码：

.fade-enter {
    opacity: 0.01;
    &.fade-enter-active {
        opacity: 1;
        transition: opacity 300ms ease-in;
    }
}

.fade-exit {
    opacity: 1;
    &-active {
        opacity: 0.01;
        transition: opacity 300ms ease-in;
    }
}

Answer 1

没关系，忘了包裹它：

<Route render={({ location }) => (

谢谢。