javascript - renderRoutes 和位置属性

Question

我正在尝试使用react-transition-group库在使用react-router-config的应用程序中进行页面转换。

为了使 react-transition-group工作，我需要在 上添加一个 location 属性<Switch>，如下所示：

<Switch location={location}>

但是，由于<Switch>使用react-router-config语法时没有，我有点迷茫。有什么建议么？

这里和这里有关于此事的讨论，但似乎还没有解决方案。

我当前的组件看起来像这样，并且转换工作有问题。

class App extends Component {
    render() {
        const currentKey = this.props.location.pathname;
        const timeout = 2000;
        return (
            <div>
                <TransitionGroup component="main" className="page-main">
                    <CSSTransition
                        key={currentKey}
                        timeout={timeout}
                        classNames="fade"
                        mountOnEnter={true}
                        unmountOnExit={true}
                        appear
                    >
                        {renderRoutes(this.props.route.routes)}
                    </CSSTransition>
                </TransitionGroup>
            </div>
        );
    }
}

Answer 1

{renderRoutes(this.props.route.routes, null, {
    location: this.props.location
})}

这就是答案。但是，目前这仅适用于最新版本的 react-router-config，可从 GitHub 获得，但不能从 NPM 获得。我有 NPM 版本，而官方 react-router-config 文档的建议只会给我一个错误。

renderRoutes(routes, extraProps = {}, switchProps = {})

现在像 react-transition-group 这样的东西似乎工作正常。