Далее JS - Показывать модальные параметры на основе параметров запроса только при загрузке первой страницы

Question

Я хочу показать модальное значение при загрузке первой страницы на основе существования параметра запроса, а не показывать его снова, когда пользователь обновит страницу sh, как мне ее обработать? (Параметр запроса можно изменить). готовить ie, но не работает нормально.

Answer 1

Итак, насколько я понимаю, вам нужно следующее:

1. Открыть модал на основе строки запроса.
2. Не открывать модал, если он уже открыт.

Допустим, URL-адрес www.mysite.com/payment?paymentStatus=success&paymentId=111

import { withRouter, Link } from 'react-router';
import queryString from 'query-string';
import Cookies from 'universal-cookie';// Haven't tried it but probably works from the repo
import Modal from 'some-modal-library';

const cookies = new Cookies();

const PaymentHandler = (props) => {
    const {paymentStatus, paymentId} = queryString.parse(props.location.search) || {};
    console.log(params); // {paymentStatus: 'success', paymentId: '111'}
    const openModal = paymentStatus && paymentStatus === 'success' ? true : false;

    if (openModal) {
        // Check if stored in cookies based on the paymentId previously
        const paymentStatusFromCookie = cookies.get(paymentId);
        if (paymentStatusFromCookie && paymentStatusFromCookie === 'success') {
            // This means we've already set it. Just return null or react fragment
            // This will not render the modal on the DOM
            return <></>;
        }

        // Else set the cookie and allow the modal render
        cookies.set(paymentId, paymentStatus, { path: '/' });
    }

    return (
        <Modal
            open={openModal}
        >
            <h2>Your payment was successful</h2>
            {/*Reroute to another page once close to even avoid refresh in the first place*/}
            <Link to="/" />Close</Link>
        </Modal>
    )
}

export default withRouter(PaymentHandler);