Перенаправление на другой URL-адрес браузера onClick назад - Reactjs

Сценарий: я нахожусь на странице, например. http://example.com/order-confirmation, а предыдущий URL — /payment. Теперь, когда пользователь нажимает кнопку «Назад», я хочу перенаправить его на домашнюю страницу, то есть на URL-адрес «/», но он возвращается на страницу/платежа. Я использую react("^15.1.0") и react-router("^2.4.1") и react-router-redux("^4.0.4") в своем приложении.

Я пробовал следовать нескольким ответам на StackOverflow или git, но все напрасно. Например. Я пробовал ниже:

import { push } from 'react-router-redux';

<Route
  path={`${AppPaths.ORDER_CONFIRMATION}/:orderId`} component={OrderConfirmationContainer} onLeave={(prevState) => routeBackHome(store, prevState)}
  onEnter={routeEntryHandler(store, nonGuestUserValidator)}
/>

const routeBackHome = (store, prevState) => {
    store.dispatch(push(`/`));
};

Мои маршруты:

export const createRoutes = store => (
<Route path={AppPaths.BASE} component={CheckoutAppContainer} onEnter={CheckoutAppContainer.fetchUserState(store)}>
<IndexRedirect to={`${AppPaths.BASE}/${AppPaths.BAG}`} />
<Route component={CheckoutWizardContainer} onLeave={() => clearNotifications(store)}>
  <Route
    path={AppPaths.BAG} component={CartContainer} onLeave={() => clearNotifications(store)}
    onEnter={() => updateStepNumber(store, 1)}
  />
  <Route
    path={AppPaths.PAYMENT} component={QuickCheckoutContainer} onLeave={() => clearNotifications(store)}
    onEnter={checkoutEntryHandler(store, 3)}
  />
</Route>
<Route
  path={`${AppPaths.ORDER_CONFIRMATION}/:orderId`} component={OrderConfirmationContainer}
  onEnter={routeEntryHandler(store, nonGuestUserValidator)}
/>
</Route>
);

Есть ли способ переопределить это поведение? Пожалуйста, предложите... Заранее спасибо :)


reactjs javascript react-router react-router-redux
person Jyoti Duhan    schedule 24.02.2017    source источник
comment
можешь выложить код?   -  person juanecabellob    schedule 24.02.2017
comment
пожалуйста, обратитесь к отредактированному вопросу.   -  person Jyoti Duhan    schedule 24.02.2017
comment
Вы используете промежуточное программное обеспечение для синхронизации истории вашего браузера с вашим магазином, а также в вашем магазине избыточности?   -  person juanecabellob    schedule 24.02.2017
comment
да, я использую метод syncHistoryWithStore для react-router-redux   -  person Jyoti Duhan    schedule 24.02.2017

Ответы (2)


arrow_upward
0
arrow_downward

Можете ли вы попробовать этот код?

class YourComponent extends Component {
  constructor(props) {
      super(props);

      this.onUnload = this.onUnload.bind(this); // if you need to bind callback to this
  }

  onUnload(event) { // the method that will be used for both add and remove event
    const gohome = confirm('go home?')
    if (gohome === true) {
      console.log('yay')
      window.location = 'http://yourhomepage.com'
    }else {
      console.log('yes')
    }
  }

  componentDidMount() {
     window.addEventListener("beforeunload", this.onUnload)
  }

  componentWillUnmount() {
      window.removeEventListener("beforeunload", this.onUnload)
  }

  render() {
    return (
      <div>
          Try with window location
      </div>
    )
  }
}
person Rahmat Aligos    schedule 24.02.2017
comment
это не работает. все еще идет последний URL-адрес, т.е. /payment. - person Jyoti Duhan; 24.02.2017
comment
Как выглядят другие маршруты? - person juanecabellob; 24.02.2017
comment
Можете ли вы вставить их в код? Это может быть связано с вашим компонентом IndexRoute. Поскольку я попробовал это в CodePen, и это работает, значит, здесь должно быть что-то еще, чего нам не хватает. Чтобы проверить это, вы должны зарегистрировать, какие компоненты загружены. И если это только компонент, загруженный /payment, то, возможно, я неправильно понимаю, о какой кнопке возврата вы говорите - person juanecabellob; 24.02.2017
comment
@juancab: отредактировал вопрос с моими маршрутами. Он переходит к домашнему URL-адресу менее чем за секунду, а затем возвращается к предыдущему URL-адресу, т. Е. /Payment. Под кнопкой «Назад» я имею в виду кнопку «Назад» в браузере. - person Jyoti Duhan; 25.02.2017
comment
когда вы открываете свою домашнюю страницу, всегда перенаправляете на / платеж, верно? - person Rahmat Aligos; 26.02.2017
comment
@RahmatAligos : нет - person Jyoti Duhan; 26.02.2017

arrow_upward
0
arrow_downward

Попробуйте следующее:

import { browserHistory } from 'react-router'

import { push } from 'react-router-redux';

<Route
  path={`${AppPaths.ORDER_CONFIRMATION}/:orderId`} component={OrderConfirmationContainer} onLeave={(prevState) => routeBackHome(store, prevState)}
  onEnter={routeEntryHandler(store, nonGuestUserValidator)}
/>

const routeBackHome = (store, prevState) => {
    browserHistory.push('/');
};
person juanecabellob    schedule 24.02.2017
comment
импорт {browserHistory} из «реагирующего маршрутизатора» не работает. «React-router» не содержит экспорт с именем «browserHistory». - person Alan Yong; 29.05.2017