Microsoft Edge中的Reactjs路由

在Microsoft edge中进行路由时遇到问题。我有3页，它们就像一个向导

开始>开始日期>提案人

当我从开始日期转到提议者时，应用程序跳回开始。非常奇怪的行为，只发生在边缘浏览器中

请在下面查找代码

  Start date:
        import React, { Component } from "react";
        import {
          Button,
          Form,
          Header,
          Container,
          Grid,
          Message
        } from "semantic-ui-react";
        import { WizardStepper } from "./WizardStepper";
        import { startDateActions } from "../redux/actions/startdate-actions";
        import { connect } from "react-redux";
        import moment from "moment";
        import { QuoteRequest } from "../models/quote-request";
        import { IStoreState } from "../redux/reducers";
        import { AuthResponse } from "../models/auth-response";
        import { quoteActions } from "../redux/actions/quote-actions";
        import DatePicker from "react-datepicker";
        import "react-datepicker/dist/react-datepicker.css";

        interface IStartDateProps {
          history: any;
          addQuoteStartDate(quoteStartDate: string): void;
          clearErrors(quoteRequest: QuoteRequest): void;
          quoteRequest: QuoteRequest;
          quoteStartDate: string;
        }

        export class _StartDate extends Component<IStartDateProps> {
          state = {
            startDate: new Date(),
            showDateEmptyError: false
          };

          constructor(props: IStartDateProps) {
            super(props);
            this.state.startDate = this.props.quoteStartDate
              ? moment(this.props.quoteStartDate).toDate()
              : new Date();
          }

          render() {
            return (
              <Container fluid>
                <WizardStepper

 activeStep={2} />
            <Container className="basic padded segment abg___main_content_wrapper">
              <Header as="h1" className="page-title">
                Choose the Start Date
              </Header>
              <p>
                The start date for cover can be from today's date up to 45 days
                ahead; we cannot back-date cover.
              </p>
              <div className="ui hidden divider" />

              <Grid stackable>
                <Grid.Row>
                  <Grid.Column mobile={16} tablet={9} computer={8}>
                    <Form>
                      <label>What date would you like the cover to start?</label>
                      <Container className="abg___datepicker">
                        <DatePicker
                          className={
                            this.state.showDateEmptyError ? "error-datepicker" : ""
                          }
                          autoComplete="off"
                          dateFormat="dd/MM/yyyy"
                          minDate={moment().toDate()}
                          maxDate={moment()
                            .add(45, "day")
                            .toDate()}
                          onChange={(date: any) => {
                            this.setState({ startDate: date });
                          }}
                          placeholderText="Start date (DD/MM/YYYY)"
                          selected={this.state.startDate}
                        />
                        {this.state.showDateEmptyError === true ? (
                          <Message negative>
                            Please complete the highlighted mandatory field
                          </Message>
                        ) : null}
                        <div className="ui hidden divider" />
                        <Button
                          size="large"
                          positive
                          className="right floated"
                          onClick={() => {
                            if (!this.state.startDate) {
                              this.setState({ showDateEmptyError: true });
                            } else {
                              this.setState({ showDateEmptyError: false });
                              this.props.addQuoteStartDate(
                                moment(this.state.startDate).format()
                              );
                              //Note:This will clear any errors if you had any errors in the next quote proposer screen
                              this.props.clearErrors(this.props.quoteRequest);
                              this.props.history.push("/quote/quote-proposer");
                            }
                          }}
                        >
                          Next
                        </Button>
                      </Container>
                    </Form>
                  </Grid.Column>
                </Grid.Row>
              </Grid>
            </Container>
          </Container>
        );
      }
    }

    const mapStateToProps = ({
      quoteStartDate,
      authResponse,
      quoteRequest
    }: IStoreState): {
      quoteStartDate: string;
      authResponse: AuthResponse;
      quoteRequest: QuoteRequest;
    } => {
      return { quoteStartDate, authResponse, quoteRequest };
    };
    const mapDispatchToProps = (dispatch: any) => {
      return {
        addQuoteStartDate: (quoteStartDate: string) => {
          return dispatch(startDateActions.addStartDate(quoteStartDate));
        },
        clearErrors: (quoteRequest: QuoteRequest) => {
          return dispatch(quoteActions.clearErrors(quoteRequest));
        }
      };
    };

    export const StartDate = connect(
      mapStateToProps,
      mapDispatchToProps
    )(_StartDate);


Proposer:

    import React from "react";
    import {
      Button,
      Form,
      Header,
      Container,
      Message,
      Grid
    } from "semantic-ui-react";
    import { WizardStepper } from "./WizardStepper";
    import { QuoteRequest, Proposer } from "../models/quote-request";
    import { connect } from "react-redux";
    import { quoteActions } from "../redux/actions/quote-actions";
    import { IStoreState } from "../redux/reducers";
    import { QuoteType } from "../models/enums";
    import { validation } from "../util/validation";
    import ErrorMessage from "./validators/ErrorMessage";
    import { TitleSelector } from "./shared/TitleSelector";

    interface IQuoteProposerProps {
      history: any;
      quoteStartDate: string;
      createQuote(quoteRequest: QuoteRequest): void;
      updateQuote(quoteId: number, quoteRequest: QuoteRequest): void;
      resetQuoteUpdate(quoteRequest: QuoteRequest): void;
      quoteType: QuoteType;
      quoteRequest: QuoteRequest;
      clearErrors(quoteRequest: QuoteRequest): void;
    }
    export class _QuoteProposer extends React.Component<IQuoteProposerProps> {
      state = {
        title: "",
        firstName: "",
        surname: "",
        companyName: "",
        contactEmail: "",
        contactPhone: "",
        showFirstNameEmptyError: false,
        showSurNameEmptyError: false,
        isTitleSelected: "",
        showInvalidEmailError: false,
        showInvalidPhoneError: false,
        isValidForm: null,
        areMandatoryFieldsEmpty: false
      };

      constructor(props: IQuoteProposerProps) {
        super(props);
        if (this.props.quoteRequest.proposer) {
          this.state.companyName = this.props.quoteRequest.proposer.companyName
            ? this.props.quoteRequest.proposer.companyName
            : "";
          this.state.title = this.props.quoteRequest.proposer.salutation
            ? this.props.quoteRequest.proposer.salutation
            : "";

          this.state.firstName = this.props.quoteRequest.proposer.firstName
            ? this.props.quoteRequest.proposer.firstName
            : "";
          this.state.surname = this.props.quoteRequest.proposer.lastName
            ? this.props.quoteRequest.proposer.lastName
            : "";
          this.state.contactEmail = this.props.quoteRequest.proposer.contactEmail
            ? this.props.quoteRequest.proposer.contactEmail
            : "";
          this.state.contactPhone = this.props.quoteRequest.proposer.contactPhone
            ? this.props.quoteRequest.proposer.contactPhone
            : "";
        }
      }

      handleCreateQuote = (event: any) => {
        event.preventDefault();

        this.checkMandatoryFieldsEmpty();
        if (this.isValidForm()) {
          let quoteRequest = new QuoteRequest();
          quoteRequest.startDate = this.props.quoteStartDate;
          quoteRequest.proposer = new Proposer();
          quoteRequest.proposer.companyName = !this.state.companyName
            ? null
            : this.state.companyName;
          quoteRequest.proposer.firstName = this.state.firstName;
          quoteRequest.proposer.lastName = this.state.surname;
          quoteRequest.proposer.salutation = this.state.title;
          quoteRequest.proposer.contactEmail = !this.state.contactEmail
            ? null
            : this.state.contactEmail;
          quoteRequest.proposer.contactPhone = !this.state.contactPhone
            ? null
            : this.state.contactPhone;

          if (
            this.props.quoteRequest.quoteDetails &&
            this.props.quoteRequest.quoteDetails.quoteId
          ) {
            this.props.updateQuote(
              this.props.quoteRequest.quoteDetails.quoteId,
              quoteRequest
            );
          } else {
            this.props.createQuote(quoteRequest);
          }
        } else {
          this.setState({ isValidForm: false });
        }
      };

      getSnapshotBeforeUpdate(prevProps: IQuoteProposerProps, prevState: any) {
        return null;
      }

      componentDidUpdate(
        prevProps: IQuoteProposerProps,
        prevState: any,
        snapshot: any
      ) {
        //When creating

        if (
          prevProps.quoteRequest.isQuoteCreated !==
          this.props.quoteRequest.isQuoteCreated
        ) {
          if (this.props.quoteRequest.isQuoteCreated) {
            this.props.clearErrors(this.props.quoteRequest);
            if (this.props.quoteType === QuoteType.Simple) {
              this.props.history.push("/quote/simple-risk");
            } else {
              this.props.history.push("/quote/complex-risk");
            }
          }
        }

        //When updating

        if (
          prevProps.quoteRequest.isQuoteUpdated !==
          this.props.quoteRequest.isQuoteUpdated
        ) {
          if (this.props.quoteRequest.isQuoteUpdated) {
            this.props.clearErrors(this.props.quoteRequest);
            this.props.clearErrors(this.props.quoteRequest);
            if (this.props.quoteType === QuoteType.Simple) {
              this.props.history.push("/quote/simple-risk");
            } else {
              this.props.history.push("/quote/complex-risk");
            }
          }
        }
      }

      isValidForm = (): boolean => {
        let isValid = true;
        if (validation.isEmpty(this.state.firstName)) {
          this.setState({ showFirstNameEmptyError: true });
          isValid = false;
        } else {
          this.setState({ showFirstNameEmptyError: false });
        }

        if (validation.isEmpty(this.state.surname)) {
          this.setState({ showSurNameEmptyError: true });
          isValid = false;
        } else {
          this.setState({ showSurNameEmptyError: false });
        }

        if (validation.isEmpty(this.state.title)) {
          this.setState({ isTitleSelected: "false" });
          isValid = false;
        } else {
          this.setState({ isTitleSelected: "true" });
        }

        if (
          !validation.isEmpty(this.state.contactEmail) &&
          !validation.isEmail(this.state.contactEmail)
        ) {
          isValid = false;
          this.setState({ showInvalidEmailError: true });
        } else {
          this.setState({ showInvalidEmailError: false });
        }

        if (
          !validation.isEmpty(this.state.contactPhone) &&
          !validation.isPhone(this.state.contactPhone)
        ) {
          isValid = false;
          this.setState({ showInvalidPhoneError: true });
        } else {
          this.setState({ showInvalidPhoneError: false });
        }

        return isValid;
      };

      checkMandatoryFieldsEmpty = () => {
        if (
          validation.isEmpty(this.state.firstName) ||
          validation.isEmpty(this.state.surname) ||
          this.state.isTitleSelected === "false"
        ) {
          this.setState({ areMandatoryFieldsEmpty: true });
        } else {
          this.setState({ areMandatoryFieldsEmpty: false });
        }
      };

      handleMandatoryFieldsCheck = (event: any) => {
        this.checkMandatoryFieldsEmpty();
      };

      render() {
        return (
          <Container fluid>
            <WizardStepper activeStep={3} />
            <Container className="padded abg___main_content_wrapper">
              <Header as="h1" className="page-title">
                About the Proposer
              </Header>
              <p>Please tell us about the proposer.</p>
              <div className="ui hidden divider" />
              <Grid stackable doubling>
                <Grid.Row>
                  <Grid.Column mobile={16} tablet={9} computer={8}>
                    <Form
                      onSubmit={this.handleCreateQuote}
                      autoComplete="off"
                      noValidate
                    >
                      <Container>
                        <Form.Field>
                          <label>Company name</label>
                          <Form.Input
                            type="text"
                            maxLength={30}
                            name="company-name"
                            value={this.state.companyName}
                            placeholder="Company Name"
                            onChange={(event: any) => {
                              this.setState({
                                companyName: event.target.value
                              });
                            }}
                          />
                        </Form.Field>
                        <Form.Field>
                          <TitleSelector
                            onClick={async (data: any) => {
                              await this.setState({
                                title: data
                              });

                              this.setState({
                                isTitleSelected: !validation.isEmpty(
                                  this.state.title
                                )
                                  ? "true"
                                  : "false"
                              });
                            }}
                            showTitleNotSelectedError={
                              this.state.isTitleSelected === "false"
                            }
                            titles={["Mr", "Mrs", "Miss", "Ms"]}
                            selectedTitle={this.state.title}
                            cssClasses="abg___button-options"
                          />
                        </Form.Field>

                        <Form.Field>
                          <label>First name</label>
                          <Form.Input
                            type="text"
                            name="first-name"
                            value={this.state.firstName}
                            maxLength={30}
                            error={this.state.showFirstNameEmptyError}
                            placeholder="First Name"
                            onChange={async (event: any) => {
                              await this.setState({
                                firstName: event.target.value
                              });

                              if (!validation.isEmpty(this.state.firstName)) {
                                this.setState({ showFirstNameEmptyError: false });
                              }
                            }}
                          />
                        </Form.Field>
                        <Form.Field>
                          <label>Surname</label>
                          <Form.Input
                            type="text"
                            name="surname"
                            maxLength={30}
                            value={this.state.surname}
                            error={this.state.showSurNameEmptyError}
                            placeholder="Surname"
                            onChange={async (event: any) => {
                              await this.setState({ surname: event.target.value });
                              if (!validation.isEmpty(this.state.surname)) {
                                this.setState({ showSurNameEmptyError: false });
                              }
                            }}
                          />
                        </Form.Field>
                        <Form.Field>
                          <label>Contact email</label>
                          <Form.Input
                            type="email"
                            name="email"
                            maxLength={30}
                            value={this.state.contactEmail}
                            error={this.state.showInvalidEmailError}
                            placeholder="Contact email"
                            onChange={(event: any) => {
                              this.setState({ contactEmail: event.target.value });
                            }}
                            onBlur={(event: any) => {
                              this.setState({
                                showInvalidEmailError: !validation.isEmail(
                                  this.state.contactEmail
                                )
                              });
                            }}
                          />
                          <ErrorMessage
                            show={this.state.showInvalidEmailError}
                            message="Invalid email"
                          />
                        </Form.Field>
                        <Form.Field>
                          <label>Contact phone</label>
                          <Form.Input
                            type="text"
                            name="tel"
                            maxLength={30}
                            value={this.state.contactPhone}
                            error={this.state.showInvalidPhoneError}
                            placeholder="Contact phone"
                            onChange={(event: any) => {
                              this.setState({ contactPhone: event.target.value });
                            }}
                            onBlur={(event: any) => {
                              this.setState({
                                showInvalidPhoneError: !validation.isPhone(
                                  this.state.contactPhone
                                )
                              });
                            }}
                          />
                          <ErrorMessage
                            show={this.state.showInvalidPhoneError}
                            message="Invalid phone"
                          />
                        </Form.Field>
                        {this.props.quoteRequest.quoteCreateError ||
                        this.props.quoteRequest.quoteUpdateError ? (
                          <Message negative>Server Error, please try again</Message>
                        ) : null}
                        {this.state.areMandatoryFieldsEmpty ? (
                          <Message negative>
                            Please complete the highlighted mandatory fields
                          </Message>
                        ) : null}
                      </Container>
                      <div className="ui hidden divider" />
                      <Container>
                        <Button
                          size="large"
                          type="submit"
                          floated="right"
                          positive
                          loading={
                            this.props.quoteRequest.isCreatingQuote ||
                            this.props.quoteRequest.isUpdatingQuote
                          }
                        >
                          Next
                        </Button>
                      </Container>
                    </Form>
                  </Grid.Column>
                </Grid.Row>
              </Grid>
            </Container>
          </Container>
        );
      }
    }

    function mapStateToProps(state: IStoreState) {
      return {
        quoteStartDate: state.quoteStartDate,
        quoteType: state.quoteType,
        quoteRequest: state.quoteRequest
      };
    }

    const mapDispatchToProps = (dispatch: any) => {
      return {
        createQuote: (quoteRequest: QuoteRequest) => {
          return dispatch(quoteActions.createQuote(quoteRequest));
        },
        updateQuote: (quoteId: number, quoteRequest: QuoteRequest) => {
          return dispatch(quoteActions.updateQuote(quoteId, quoteRequest));
        },
        resetQuoteUpdate: (quoteRequest: QuoteRequest) => {
          return dispatch(quoteActions.resetQuoteUpdate(quoteRequest));
        },
        clearErrors: (quoteRequest: QuoteRequest) => {
          return dispatch(quoteActions.clearErrors(quoteRequest));
        }
      };
    };

    export const QuoteProposer = connect(
      mapStateToProps,
      mapDispatchToProps
    )(_QuoteProposer);

Layout page routes:

    render() {
        return (
          <div id="page-container">
            <div id="content-wrap" className="clearfix">
              <PageHeaderBar />
              <Switch>
                <Route
                  exact
                  path="/login"
                  component={Login}
                  authenticatedRedirect="/quote/getting-started"
                />

                <PrivateRoute exact path="/" component={GettingStarted} />
                <PrivateRoute
                  exact
                  path="/quote/getting-started"
                  component={GettingStarted}
                />
                <PrivateWizardRoute
                  exact
                  path="/quote/start-date"
                  component={StartDate}
                  wizard={this.props.wizard}
                />

                <PrivateWizardRoute
                  exact
                  path="/quote/quote-proposer"
                  component={QuoteProposer}
                  wizard={this.props.wizard}
                />
                <PrivateWizardRoute
                  exact
                  path="/quote/simple-risk"
                  component={SimpleRisk}
                  wizard={this.props.wizard}
                />
                <PrivateWizardRoute
                  exact
                  path="/quote/complex-risk"
                  component={ComplexRisk}
                  wizard={this.props.wizard}
                />
                <PrivateRoute exact path="/quote/summary" component={Summary} />
              </Switch>
              <PageFooter />
            </div>
          </div>
        );
      }
    }

PrivateWizardRoute:

    import React from "react";
    import { Redirect, Route, RouteProps } from "react-router-dom";
    import { Wizard } from "../models/wizard";
    import { WizardStage } from "../models/enums";

    interface IPrivateWizardRouteProps {
      wizard: Wizard;
    }

    export class PrivateWizardRoute extends React.Component<
      IPrivateWizardRouteProps & RouteProps
    > {
      renderRoute = () => {
        let isAuthenticated = localStorage.getItem("authResponse") ? true : false;

        if (isAuthenticated) {
          if (this.props.wizard.wizardStage === WizardStage.InProgress) {
            const { path, exact, component } = this.props;
            return <Route path={path} exact={exact} component={component} />;
          } else {
            return (
              <Redirect
                to={{
                  pathname: "/quote/getting-started"
                }}
              />
            );
          }
        } else {
          return <Redirect to={{ pathname: "/login" }} />;
        }
      };

      render() {
        return this.renderRoute();
      }
    }
    export default PrivateWizardRoute;

开始日期：
从“React”导入React，{Component}；
进口{
按钮
形式，
标题，
集装箱，
网格，
消息
}从“语义用户界面反应”；
从“/WizardStepper”导入{WizardStepper}；
从“./redux/actions/startDateActions”导入{startDateActions}”；
从“react redux”导入{connect}；
从“时刻”中导入时刻；
从“./模型/报价请求”导入{quotereRequest}；
从“./redux/reducers”导入{IStoreState}”；
从“./models/auth response”导入{auth response}；
从“./redux/actions/quote-actions”导入{quoteActions}；
从“反应日期选择器”导入日期选择器；
导入“react datepicker/dist/react datepicker.css”；
接口IStartDateProps{
历史：有；
addQuoteStartDate（quoteStartDate:string）：无效；
clearErrors（quoteRequest:quoteRequest）：无效；
quoteRequest:quoteRequest；
quoteStartDate:字符串；
}
导出类_StartDate扩展组件{
状态={
开始日期：新日期（），
ShowDateEmptyYerror:错误
};
构造函数（道具：IStartDateProps）{
超级（道具）；
this.state.startDate=this.props.quoteStartDate
？时刻（this.props.quoteStartDate）.toDate（）
：新日期（）；
}
render（）{
返回(
选择开始日期

保险的开始日期可以从今天开始，最多45天
在前面；我们不能追溯封面日期。

你希望封面什么时候开始？
{
this.setState（{startDate:date}）；
}}
占位符text=“开始日期（DD/MM/YYYY）”
selected={this.state.startDate}
/>
{this.state.showDateEmptyError==真(
请填写突出显示的必填字段
)：null}
{
如果（！this.state.startDate）{
this.setState（{showDateEmptyError:true}）；
}否则{
this.setState（{showDateEmptyError:false}）；
this.props.addQuoteStartDate(
矩（this.state.startDate）.format（）
);
//注意：如果您在下一个报价提议人屏幕中有任何错误，这将清除所有错误
this.props.clearErrors（this.props.quoteRequest）；
这个.props.history.push（“/quote/quote提议者”）；
}
}}
>
下一个
);
}
}
常量MapStateTops=({
quoteStartDate，
作者回应，
报价要求
}：房地产）：{
quoteStartDate:字符串；
authResponse:authResponse；
quoteRequest:quoteRequest；
} => {
返回{quoteStartDate，authResponse，quoteRequest}；
};
const mapDispatchToProps=（调度：任意）=>{
返回{
addQuoteStartDate：（quoteStartDate:string）=>{
退货派送（startDateActions.addStartDate（quoteStartDate））；
},
clearErrors：（quoteRequest:quoteRequest）=>{
返回调度（quoteActions.clearErrors（quoteRequest））；
}
};
};
export const StartDate=connect(
MapStateTops，
mapDispatchToProps
)（_StartDate）；
提议人：
从“React”导入React；
进口{
按钮
形式，
标题，
集装箱，
消息
网格
}从“语义用户界面反应”；
从“/WizardStepper”导入{WizardStepper}；
从“./模型/报价请求”导入{QuoteRequest，Proposer}；
从“react redux”导入{connect}；
从“./redux/actions/quote-actions”导入{quoteActions}；
从“./redux/reducers”导入{IStoreState}”；
从“./models/enum”导入{QuoteType}；
从“./util/validation”导入{validation}；
从“/validators/ErrorMessage”导入ErrorMessage；
从“/shared/TitleSelector”导入{TitleSelector}”；
接口IkoteProposerProps{
历史：有；
quoteStartDate:字符串；
createQuote（quoteRequest:quoteRequest）：无效；
updateQuote（quoteId:number，quoteRequest:quoteRequest）：无效；
resetQuoteUpdate（quoteRequest:quoteRequest）：无效；
quoteType:quoteType；
quoteRequest:quoteRequest；
clearErrors（quoteRequest:quoteRequest）：无效；
}
导出类“QuoteProposer扩展React.Component”{
状态={
标题：“，
名字：“，
姓：“，
公司名称：“，
联络电邮：“，
联络电话：“，
showFirstNameEmptyYerror:false，
ShowName EmptyYerror:错，
“已选定：”