Как вы указываете на другой маршрут с реагировать-роутер-дом?с тем же компонентом - PullRequest
0 голосов
/ 04 апреля 2019

У меня есть компонент входа и регистрации, когда dihome успешно выполняет вход, затем перенаправляет на дом, если вход успешен, но я хочу использовать компонент логики в подробном компоненте продукта, при успешном входе он переходит непосредственно к компоненту извлечения, чтоЯ хочу спросить, как вы отличаете дело?ниже файла Login.jsx

import React, { Component } from "react";
import { Input, Form, Button, Icon, Checkbox, Row, Col, Affix } from "antd";
import { Redirect,Link } from "react-router-dom";
import ButtonFacebook from "../../components/Button/SocialMedia/Facebook";
import ButtonGoogle from "../../components/Button/SocialMedia/Google";
import { connect } from "react-redux";
import logoMonggoPesen from "../../assets/img/logo_monggopesen.png";
import "./style.sass";
import strings from "../../localization/localization";
import {
  loginWithGoogle,
  loginWithForm
} from "../../store/actions/authentication";
import {
  rulesEmail,
  rulesPassword,
  AlertLogin
} from "../Register/registerContainer";
import HomePage from "../Home";

const FormItem = Form.Item;

class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      errorMessage: null,
      isErorloaded: false
    };
  }

  handleloginGoogle = request => {
    this.props.loginWithGoogle(this.props.history, request);
  };

  handleSubmit = e => {
    try {
      e.preventDefault();
      this.props.form.validateFields(async (err, values) => {
        if (!err) {
          console.log("Received values of form: ", values);
          await this.props.loginWithForm(values);
          if (this.state.isAuthenticated !== true) {
            this.setState({
              errorMessage: "Email atau password anda salah",
              isErorloaded: true
            });
          }
        }
      });
    } catch (error) {
      console.log(error);
    }
  };

  render() {
    console.log(this.props.token);
    const { form, isAuthenticated } = this.props;
    const { getFieldDecorator } = form;
    const { errorMessage, isErorloaded } = this.state;
    const linkCheckout = "/checkout";
    if (isAuthenticated === true) {
      return <Redirect to={linkCheckout} />;
    }

    console.log(errorMessage);
    return (
      <React.Fragment>
        <Row>
          <Col md={{ span: 14 }}>
            <div
              className="scrollable-container"
              ref={node => {
                this.container = node;
              }}
            >
              <Affix target={() => this.container}>
                <div className="register_Background" />
              </Affix>
            </div>
          </Col>
          <Col md={{ span: 10 }}>
            <div className="register">
            <Link to="/">
              <img
                className="register__logo"
                src={logoMonggoPesen}
                alt="login__logo"
              />
              </Link>
              <h2 className="register__title">{strings.login_enter}</h2>
              <Form onSubmit={this.handleSubmit}>
                <FormItem>
                  {getFieldDecorator("email", rulesEmail())(
                    <Input
                      className="register__input"
                      size={"large"}
                      prefix={
                        <Icon
                          type={"user"}
                          style={{ color: "rgba(0,0,0,.25)" }}
                        />
                      }
                      placeholder={"Email"}
                    />
                  )}
                </FormItem>
                <FormItem>
                  {getFieldDecorator("password", rulesPassword())(
                    <Input
                      size={"large"}
                      prefix={
                        <Icon
                          type={"lock"}
                          style={{ color: "rgba(0,0,0,.25)" }}
                        />
                      }
                      placeholder={"Password"}
                      type="password"
                    />
                  )}
                </FormItem>
                <FormItem>
                  {/* {getFieldDecorator("remember", {
                    valuePropName: "checked",
                    initialValue: true
                  })(<Checkbox>{strings.login_remember_me}</Checkbox>)} */}
                  <a className="login-form__forgot" href="/">
                    {strings.login_forgot_password}
                  </a>
                  <Button
                    size={"large"}
                    htmlType="submit"
                    className="register__form__button-register"
                  >
                    <p className="register__form__button-register-text">
                      {strings.login_enter}
                    </p>
                  </Button>
                  <AlertLogin errorMessage={errorMessage} isErorloaded={isErorloaded}/>
                </FormItem>
                <div className="login__separator">
                  <p>
                    {strings.login_option}
                  </p>
                </div>
                <Form.Item className="register__form__btn-socmed">
                  <div className="register__form__socmed-box">
                    <ButtonFacebook
                      className="register__form__socmed-button"
                      onSubmit={this.handleRegisterGoogle}
                    >
                      {strings.facebook}
                    </ButtonFacebook>
                    <ButtonGoogle
                      className="register__form__socmed-button"
                      onSubmit={this.handleRegisterGoogle}
                    >
                      {strings.google}
                    </ButtonGoogle>
                  </div>
                  <center className="register__form__direct-login">
                    {strings.formatString(
                      strings.login_quote,
                      <a href="/register" className="login-form__login">
                        {strings.login_register}{" "}
                      </a>
                    )}
                  </center>
                </Form.Item>
              </Form>
            </div>
          </Col>
        </Row>
      </React.Fragment>
    );
  }
}

const mapStateToProps = state => ({
  isAuthenticated: state.authentication.isAuthenticated,
  token: state.authentication.token
});

const LoginForm = Form.create({})(Login);
export default connect(
  mapStateToProps,
  { loginWithGoogle, loginWithForm }
)(LoginForm);

как компонент входа в систему узнает, если, например, он из подробного продукта перенаправляет к оформлению заказа и как он узнает, что в дополнение к отсутствию на странице продукта подробностипри успешном входе в систему направляются на дом?

ниже, prodocut detail.jsx

import React, { Component } from "react";
import SliderProductDetail from "components/SliderSecondary";
import { Col, Row, Card, Spin } from "antd";
import Variants from "../../components/Variant/Variants";
import "./style.sass";
import ButtonQuantity from "../../components/ButtonQuantity";
import { Redirect } from "react-router-dom";
import strings from "../../localization/localization";
import ProductAttibutes from "../../components/ProductAttributes";
import Shipping from "../../components/Shipping";
import ScrollToTopOnMount from "../../components/ScrollToTopOnMount"
import Login from "../Login";

export default class ProductDetail extends Component {
  render() {
    const {
      changeCheckout,
      open,
      addCheckout,
      price,
      name,
      images,
      index,
      variants,
      variantsRef,
      changed,
      onChangeVariant,
      sizeId,
      colorId,
      sku,
      onChangeQuantity,
      stockAlert,
      details
    } = this.props;
    const Login = <Login nextPage={"checkout"} />
    return (
      <React.Fragment>
        <Row>
          <Col md={24}>
          <ScrollToTopOnMount/>
            <div className="productDetailBorder" />
            <div className="container productDetail">
              <Row>
                <Col md={10}>
                  <h2>
                    {" "}
                    {name || <Spin />}
                  </h2>
                  <SliderProductDetail images={images} index={index} />
                </Col>
                <Col md={14}>
                  <div className="productDetail__variantContent">
                    {!name ? (
                      <Spin />
                    ) : (
                      <p className="productDetail__price">{price}</p>
                    )}
                    {variants.map((variant, index) => (
                      <Variants
                        ref={variantsRef[index]}
                        key={variant.id}
                        index={index}
                        name={
                          variant.name.charAt(0).toUpperCase() +
                          variant.name.substring(1)
                        }
                        values={variant.values}
                        id={variant.id}
                        changed={changed}
                        onChangeVariant={onChangeVariant}
                        sizeId={sizeId}
                        colorId={colorId}
                        sku={sku}
                      />
                    ))}
                    <ButtonQuantity
                      title="Jumlah"
                      quantity={1}
                      onChange={onChangeQuantity}
                    />
                    <p className="productDetail__stock">{stockAlert}</p>

                    <div className="productDetail__delivery">
                      {!price ? (
                        <Spin />
                      ) : (
                        <p>
                          {strings.delivery_from}:{" "}
                          <b className="productDetail__china">
                            {strings.china}
                          </b>{" "}
                          {strings.delivery_to}
                        </p>
                      )}
                    </div>
                    <Shipping />
                    <button
                      className="productDetail__addCart"
                      onClick={addCheckout}
                    >
                      {strings.add_to_cart}
                    </button>
                  </div>
                </Col>
              </Row>
              <Row>
                <Col md={24} style={{ marginTop: 50 }}>
                  <Card>
                    <h2 style={{ padding: 12 }}>{strings.detail_product}</h2>
                    {Object.keys(details).map((detail, i) => {
                      return (
                        <ProductAttibutes
                          key={i}
                          description={details[detail]}
                          label={
                            detail.charAt(0).toUpperCase() + detail.substring(1)
                          }
                        />
                      );
                    })}
                  </Card>
                </Col>
              </Row>
            </div>
          </Col>
        </Row>
        {open === true && <Redirect to={Login}/>}
        {changeCheckout === true && <Redirect to="/checkout" />}
      </React.Fragment>
    );
  }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...