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

謝謝。