react-transition-group不与React Router一起使用

Question

我有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 }) => (

谢谢。