renderRoutes 和位置 属性 on <Switch>

Question

我正在尝试使用 react-transition-group library for page transition in an app using react-router-config。

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

<Switch location={location}>

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

有人讨论这个问题here and 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>
        );
    }
}

Answer 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 这样的东西似乎工作正常。