Установка компонентов маршрутизатора React дважды - PullRequest
0 голосов
/ 11 мая 2018

У меня есть следующее:

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 монтируется дважды.

В документах упоминается, что использование свойства Route render должно решить эту проблему, но затем этот SO ответ упоминает, что это не будет работать для компонентов, созданныхHOC.

Поскольку HandleSignIn обернут в React Redux 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);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...