Question

我正在尝试在我的应用程序的两个页面之间建立一个简单的过渡，该过渡使用react-router和无状态react组件。我试图以与文档中的示例相同的方式进行设置：http://reactcommunity.org/react-transition-group/with-react-router

以下是相关代码：

{routes.map(({ path, Component }) => (
    <Route key={path} exact path={path}>
        {({ match }) => (
            <CSSTransition
                in={match != undefined}
                timeout={300}
                classNames="page"
                unmountOnExit
            >
                <Component {...match} />
            </CSSTransition>
        )}
    </Route>
))}

因此，据我所知，以这种方式使用CSSTransition的想法是，“ in”道具是由“ match”控制的，并且通过使用Route的children函数，每次都会调用child组件，而不只是在路线匹配时。这一切对我来说都是有意义的，但是在示例中，子级“页面”组件根本没有使用传入的道具。它们看起来像是静态页面。

但是，在我的场景中，我正在使用道具。并且当发生页面转换时，传出页面组件的props为空，因此我的代码的这一部分崩溃了，因为现在我们要转换的页面的props为null。

const ExamplePage = props => {
    const { params } = props;
    const { id } = params;
    ...
}

我觉得这里一定缺少一些简单的东西，但是我看不到如何在输出组件中仍然保留道具，以便在转换过程中保持渲染。

其他任何人都尝试过此方法，并且知道如何正确设置它？

提前谢谢！

在将react-transition-group与react-router和无状态组件一起使用时遇到麻烦

0 个答案: