React Router Redirect не перенаправляет
Я пытаюсь перенаправить с этой страницы после отправки формы. Почему-то ничего не делает. Я не получаю ошибку, и страница остается прежней. Я использую реактивный маршрутизатор 4. Что мне здесь не хватает?
handleSubmit(event) {
event.preventDefault();
if (isObjectEmpty(errorsInForm)) {
Meteor.call(
'user.multiplechoice.answer',
conductedExamId,
(err, res) => {
if (err) {
alert(err.reason);
} else {
<Redirect to = "/test" />;
}
}
);
}
}
Вы должны возвращать <Redirect /> внутри метода рендеринга. Внутри методов вы можете использовать историю из реквизита для отправки.
@tarzenchug чувак, большое тебе спасибо! Я столкнулся с этой проблемой в течение недели. И вы объясняете, что я не нашел раньше. Еще раз спасибо
Ответы 2
<Redirect /> — это компонент, который должен возвращаться функцией render, а не обработчиком событий. Если вы хотите использовать компонент Redirect, вы должны установить состояние при успешном вызове API и визуализировать компонент на основе этого состояния.
state = {
formSuccess: false
}
handleSubmit(event) {
/* Call to api was successful */
this.setState({ formSuccess: true });
}
render() {
if (this.state.formSuccess) {
return (<Redirect to = "/test" />);
}
/* The rest of your render function */
}
Если вы не хотите использовать компонент Redirect и просто хотите перенаправить, у вас должен быть доступ к истории вашего компонента Router. Вы делаете это, обертывая свой компонент, который имеет функцию handleSubmit, с withRouter HOC, чтобы предоставить ему доступ к истории.
import { withRouter } from "react-router";
class MyAwesomeFormComponent {
handleSubmit() {
/* Call to api was successful */
this.props.history.push("/test");
}
}
export default withRouter(MyAwesomeFormComponent);
Сначала используйте компонент более высокого порядка с маршрутизатором из react-router-dom ''' Затем используйте this.props.history.push («маршрут-путь»); '''
вместо использования <Redirect /> попробуйте использовать `this.props.history.push('/test') '