反应路由器组件安装两次

Question

我有以下几点：

const RoutedApp = ({ signedIn }) => {
  return (
    <BrowserRouter>
      <Switch>
        <Route path={routes.HANDLE_SIGN_IN} render={props => <HandleSignIn {...props} />} />
        <PublicRoute exact path={routes.LANDING} signedIn={signedIn} component={LandingContainer} />
        <PrivateRoute exact path={routes.HOME} signedIn={signedIn} component={HomeContainer} />
        <Route component={PageNotFoundContainer} />
      </Switch>
    </BrowserRouter>
  );
};

问题出在HandleSignInContainer.

该组件基本上只是让用户登录并将他们发送到主页location.push('/home')；

但是，我遇到了HandleSignInContainer安装两次的问题。

该文档提到，在使用Routerender道具应该可以解决这个问题，但后来这个SO答案中提到，这将不是由HOC创建的组件工作。

既然HandleSignIn是用 React Redux's 包裹的connect()，我怎样才能阻止这个组件挂载两次？

更新 1

尝试包装非连接组件：

const WrappedHandleSignInContainer = props => (
  <div>
    <HandleSignInContainer {...props} />
  </div>
);

更新 2

代码HandleSignInContainer：

import React from 'react';
import { connect } from 'react-redux';
import { signInAction } from '../actions/userActions';
import { checkSignInLink } from '../resources/utils';

class HandleSignInContainer extends React.Component {
  state = {
    valid: true,
  };

  componentDidMount() {
    alert('mounted');

    const url = window.location.href;

    if (!checkSignInLink(url)) {
      this.setState({ valid: false });
      return;
    }

    let email = localStorage.getItem('email');
    this.props.signInAction(email, url, this.props.history);
  }

  render() {
    const { valid } = this.state;
    let text;

    if (valid) {
      text = "Please wait, we're signing you in!";
    } else {
      text = "Oops! That doesn't seem to be a valid sign in link.";
    }

    return text;
  }
}

export default connect(null, { signInAction })(HandleSignInContainer);