Блог

Главная - Вопросы по программированию - React — history.push-перенаправление не работает

React — history.push-перенаправление не работает

#javascript #reactjs #ajax #redirect #browser-history

#javascript #reactjs #ajax #перенаправление #браузер-история

Вопрос:

Я пытаюсь перенаправить свою страницу после входа в систему, используя .then тип ajax. Все работает, кроме history.push() команды:

 axios
  .post('http://localhost:8080/login', {
    email,
    password
  })
  .then((res) => {
    sessionStorage.token = res.data.token;
    const { sub } = JSON.parse(atob(res.data.token.split('.')[1]));
    sessionStorage.email = sub;
  })
  .then(() => history.push("/reservations"))
  .catch(() => setError(connectionError))
}

Вместо перенаправления он правильно входит в систему, но не меняет страницу. Страница обновляется при обновлении, но перенаправление по-прежнему отсутствует.
Не уверен, имеет ли это значение, но вот мой маршрут:

 <Route path="/reservations" exact component={Reservations}/>

Помощь очень ценится

Комментарии:

1. Могут быть и другие проблемы, но .then(history.push("/reservations")) это неправильно. Так и должно быть .then(() => history.push("/reservations")) .

2. Привет, я столкнулся с той же проблемой. Нашли ли вы решение для этого?

Ответ №1:

Что-то не так с синтаксисом последнего .then . Разве это не должен быть метод обратного вызова, внутри которого вы будете вызывать history.push ?

Что — то вроде этого:

 axios
  .post('http://localhost:8080/login', {
    email,
    password
  })
  .then((res) => {
    sessionStorage.token = res.data.token;
    const { sub } = JSON.parse(atob(res.data.token.split('.')[1]));
    sessionStorage.email = sub;
  })
  .then(() => history.push("/reservations"))
  .catch(() => setError(connectionError))
}

Комментарии:

1. Я пробовал это, но он все равно не перенаправлял

2. Сможете ли вы воспроизвести это с помощью образца StackBlitz или CodeSandbox ?

Ответ №2:

Я добавлю ответ от SiddAjmera, если история по-прежнему не работает, вам нужно добавить историю пакетов

история установки npm

index.js

 import React from "react";
import ReactDOM from "react-dom";
import { Router } from "react-router";
import { createBrowserHistory } from "history";

export const history = createBrowserHistory();

ReactDOM.render(
  <Router history={history}>
    <App />
  </Router>,
  node
);
 
 import {history} from "./index"
axios
  .post('http://localhost:8080/login', {
    email,
    password
  })
  .then((res) => {
    sessionStorage.token = res.data.token;
    const { sub } = JSON.parse(atob(res.data.token.split('.')[1]));
    sessionStorage.email = sub;
  })
  .then(() => history.push("/reservations"))
  .catch(() => setError(connectionError))
}

Комментарии:

1. Я попробую это сделать, но я использую useHistory из react-router-dom

Ответ №3:

Попробуйте сделать это таким образом:

 axios
      .post('http://localhost:8080/login', {
        email,
        password
      })
      .then((res) => {
        sessionStorage.token = res.data.token;
        const { sub } = JSON.parse(atob(res.data.token.split('.')[1]));
        sessionStorage.email = sub;
        history.push("/reservations");
      })
      .catch(() => setError(connectionError))
    }

Ответ №4:

Измените .then(history.push("/reservations")) на .then(() => history.push("/reservations")) .