如何使用react-router的<Redirect />来维持动画页面过渡？

Question

设置

假设我使用CSSTransitionGroup中的react-addons-css-transition-group建立了一个简单的react-router设置，以在页面之间进行动画淡入淡出过渡。 当我在两个页面中都有静态内容时，它会按预期工作。

/* … */

<CSSTransitionGroup
    component={Fragment}
    transitionName={{/*…*/}}>
    <Switch key={location.pathname} location={location}>
        <Route path="/home" component={Home} />
        <Route path="/auth" component={Auth} />
    </Switch>
</CSSTransitionGroup>

/* … */

现在，假设/auth仅在用户未登录时才可访问。因此，当用户登录时或在用户进入/auth时在地址栏中键入URL /auth并登录，必须将它们重定向到其他地方，例如到/home。

鉴于Auth组件（已连接到redux存储并监听状态更新），如下所示：

function Auth({isLoggedIn, dispatch}) {

    if (isLoggedIn) return <Redirect to="/home" />

    function submit() {
        loginUser() /* sending credentials to the server */
            .then(() => dispatch({
                type: "SET_USER_LOGGED_IN",
                value: true
            }));
    }    

    /* Here goes the login form */

}

export default connect(/* … */)(Auth);

问题

当用户重定向到首页时，Auth在技术上是空的，因此在淡出期间该表单不会呈现。 而且，它仍然呈现Redirect组件，使react-router不断地重定向用户，从而导致更新深度限制错误。

1. 我可以做什么/更改以保持页面之间的逻辑和动画过渡？
2. 我能否至少以某种方式使Auth页不会因为触发不断重定向而使整个应用崩溃？