React router Ссылка на кнопку условного рендеринга
У меня есть кнопка с щелчком мыши, которая переводит ее в функцию, которая отображает предупреждение с вопросом «вы уверены». Если человек нажимает «ОК» в предупреждении, я бы хотел, чтобы ссылка вела на определенную страницу. Если они нажмут «Отмена», я бы хотел, чтобы он перешел на другую страницу. Вот что у меня есть...
<Link to = "/calibrateAir" params = {{ moisture: props.moisture }}>
<MyButton onClick = {() => {calibrateAgain()}}>
Calibrate Again
</MyButton>
</Link>
а функция...
function calibrateAgain() {
const user = localStorage.getItem('user')
const alertWindow = window.confirm("Are you sure you want to calibrate?")
if (alertWindow) {
axios.post("http://localhost:3001/api/calibrate",
{airValue: null, waterValue: null, user: user}).then((response) => {
alert(response.data)
}, (error) => {
console.info(error)
})
}
}
По сути, я хочу отобразить «/ калибровать воздух», если для окна предупреждения установлено значение «истина», иначе «/».
Ответы 1
Не используйте компонент ссылки (потому что вложение кнопки внутри тега привязки — это плохое написание html), используйте историю реагирования маршрутизатора, чтобы выполнить то, что вы хотите. Например, если вы используете функциональный компонент, вы можете сделать
import React from "react";
import { useHistory } from "react-router-dom";
export default function YourComponent() {
const history = useHistory()
function calibrateAgain() {
const user = localStorage.getItem('user')
const alertWindow = window.confirm("Are you sure you want to calibrate?")
if (alertWindow) {
axios.post("http://localhost:3001/api/calibrate",
{airValue: null, waterValue: null, user: user}).then((response) => {
// Push to the calibrateAir if response succeeds
history.push("/calibrateAir");
alert(response.data)
}, (error) => {
// Push to the / if response fails
history.push("/");
console.info(error)
})
} else {
// Push to the / if user press cancel in the alert
history.push("/");
}
}
return (
<MyButton onClick = {calibrateAgain}>
Calibrate Again
</MyButton>
);
}
Вы импортировали это: import {useHistory} from "react-router-dom"; ?
Упс. Я импортировал, но теперь он говорит, что объект не является функцией для строки useHistory
какую версию реактивного маршрутизатора вы используете?
"реакция-маршрутизатор-дом": "^ 5.2.0"
Мне жаль. У меня была опечатка в моем импорте. это работает сейчас. Спасибо!
Почему компонент Link не работает? Была такая же проблема, и она работает без ссылки ... Спасибо, а почему :)?
Поскольку вложение кнопки внутри тега a недопустимо для html5, и для требований этого вопроса ссылка не имеет никакого смысла, потому что нам нужно сделать некоторые дополнительные действия, прежде чем мы сможем перенаправить пользователя на другую страницу.
Я получаю эту ошибку «useHistory» не определено no-undef