React Router Component Mounting Twice

Question

I have the following:

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

The issue is with the HandleSignInContainer.

That component basically just signs the user in and sends them to the home page with location.push('/home');

However, I'm having the issue where HandleSignInContainer is mounting twice.

The docs mention that using the Route render prop should fix this problem, but then this SO answer mentions that this won't work for components created by an HOC.

Since HandleSignIn is wrapped with React Redux's connect(), how can I stop this component from mounting twice?

update 1

Trying to wrap in non-connected component:

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

update 2

Code for the 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);

what if you wrap HandleSignIn with un`connect`ed component ? — Tomasz Mularczyk, May 11 '18 at 14:35
@TomaszMularczyk do you mean like above? I've updated the question. The issue persists when I try the above. — Colin Ricardo, May 11 '18 at 14:38
@TomaszMularczyk no, the same issue of the component rendering twice :( — Colin Ricardo, May 11 '18 at 14:40
Could you explain why is it a problem that component is mounting twice? I don't see any antipatterns in this code, so maybe it would be easier to solve your problem directly. — Tomasz Mularczyk, May 11 '18 at 14:41
@TomaszMularczyk Sure, it's a problem because it means the `signInAction` is called twice, which triggers an error the second time. I've updated to show the `HandleSignInContainer` code. — Colin Ricardo, May 11 '18 at 14:44
couldn't you just check if a user has already been signed? relying upon that component will be mounted just once is an error-prone restriction imo. — Tomasz Mularczyk, May 11 '18 at 14:47
I have a different setup that I'm using but facing the same error. Did you find any solution to this? — Abhas, Oct 12 '18 at 08:19
No worries @Colin. Please let me know if you remember it by any chance. I still haven't figured it out. — Abhas, Nov 30 '18 at 13:21

React Router Component Mounting Twice

update 1

update 2

0 Answers0