Reactjs 路由器转换搞砸了答案

【问题标题】：Reactjs router transition is messed upReactjs 路由器转换搞砸了
【发布时间】：2020-04-01 13:50:02
【问题描述】：

我正在尝试实现 react 的路由器转换。

有一个过渡，但它搞砸了 - 进入路线出现，淡出然后再次出现。但即使不是所有路线！此外，没有退出过渡。

我想要的是每条路线之间的简单平滑淡入淡出。我该怎么做？

我已经设置了以下内容：

const App = ({location}) => {

    return (
        <section className="main__wrapper">
            <ScrollToTop/>
            <Header/>
            <TransitionGroup>
                <CSSTransition
                    key={location.key}
                    timeout={{enter: 1000, exit: 1000}}
                    classNames={'fade'}>
                    <Switch>
                        <Route path="/" exact>
                            <Home/>
                            <Projects/>
                        </Route>
                        <Route path="/project/:name" exact>
                            <Project/>
                        </Route>
                        <Route path="/about" exact>
                            <About/>
                        </Route>
                    </Switch>
                </CSSTransition>
            </TransitionGroup>
        </section>

    );
};

export default withRouter(App);

.fade-enter {
  opacity: 0;
  transition: 1000ms;
}

.fade-exit {
  opacity: 0;
  transition: 1000ms;
}

【问题讨论】：

标签： reactjs react-router react-router-dom

【解决方案1】：

您可以使用react-router-transition，它提供了向路由添加过渡的简单方法

https://www.npmjs.com/package/react-router-transition

这里是示例演示网站

http://maisano.github.io/react-router-transition/getting-started

【讨论】：