У меня есть следующее:
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);