<Switch> 上的 renderRoutes 和 location 属性答案

【问题标题】：renderRoutes and the location property on <Switch><Switch> 上的 renderRoutes 和 location 属性
【发布时间】：2018-01-16 00:56:17
【问题描述】：

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

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

<Switch location={location}>

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

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

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

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>
        );
    }
}

【问题讨论】：

标签： javascript reactjs react-router react-transition-group

【解决方案1】：

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

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

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

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

【讨论】：