ReactJS HREF 导致状态丢失

我有一个名为 EnrollForm 的父组件，带有一个 BrowserRouter，该组件路由到不同的子组件，这些子组件是我的整个 EnrollForm 的页面。

每次填写子组件页面并单击下一个 btn 时，所有表单字段都会保存到子组件状态 obj，然后该状态会传递到父 EnrollForm 状态。这个流程工作正常。但是，当我将代码行添加到 href 到下一个子组件时，父 EnrollForm 状态被删除，BioForm 的状态也被删除。

任何帮助将不胜感激，这可能很简单，但我已经研究了很长时间......

报名表组件：

class EnrollForm extends Component {
    state = {

    }

    setParentFormState = (newStateObj, fromComponent) => {
        this.setState({...this.state, ...newStateObj}, () => {
            console.log('Updated EnrollForm component state from ' + fromComponent);
            console.log(this.state);
        });
    }

    render() {
        return (
            <Router>
                <div className='workflow'>
                    <Route path='/enrollment-form/bio' render={(routeProps)=>(<BioForm {...routeProps} setParentFormState={this.setParentFormState}/>)}/>
                    <Route path='/enrollment-form/citizenship' render={(routeProps)=>(<CitizenshipForm {...routeProps} setParentFormState={this.setParentFormState}/>)}/>
                    <Route path='/enrollment-form/identity' render={(routeProps)=>(<IdentityForm {...routeProps} setParentFormState={this.setParentFormState}/>)}/>
                    <Route path='/enrollment-form/attributes' render={(routeProps)=>(<AttributesForm {...routeProps} setParentFormState={this.setParentFormState}/>)}/>
                    <Route path='/enrollment-form/address' render={(routeProps)=>(<AddressForm {...routeProps} setParentFormState={this.setParentFormState}/>)}/>
                    <Route path='/enrollment-form/eligibility' render={(routeProps)=>(<EligibilityForm {...routeProps} setParentFormState={this.setParentFormState}/>)}/>
                    <Route path='/enrollment-form/documents' render={(routeProps)=>(<DocumentsForm {...routeProps} setParentFormState={this.setParentFormState}/>)}/>
                    <Route path='/enrollment-form/location' render={(routeProps)=>(<LocationForm {...routeProps} setParentFormState={this.setParentFormState}/>)}/>
                    <Route path='/enrollment-form/appointment' render={(routeProps)=>(<ApptTimeForm {...routeProps} setParentFormState={this.setParentFormState}/>)}/>
                    <Route path='/enrollment-form/status' render={(routeProps)=>(<StatusForm {...routeProps} setParentFormState={this.setParentFormState}/>)}/>
                </div>
            </Router>
        );
    }
}

export default EnrollForm;

生物形态成分：

class BioForm extends Component {
    state = {
        first_name: null,
        middle_name: null,
        last_name: null,
        u_suffix: null,
        u_gender: null,
        u_dob: null,
        u_lang: null,
        u_email: null,
        u_country_code_1: null,
        u_country_code_2: null,
        u_phone_1: null,
        u_phone_2: null,
        u_contact_method: null

    }

    nextButtonClicked = event => {
        let form = document.getElementById('applicant-form');
        let formDataJsObj = FormFunctions.getJsObjFromFormData(form);
        let keyToDelete = 'u_email[verify]';
        //This field is removed from the form data object because it is not sent in the POST request
        FormFunctions.removeKeyFromFormObj(formDataJsObj, keyToDelete);
        console.log(formDataJsObj);
        this.setState(formDataJsObj, () => {
            this.props.setParentFormState(this.state, this.constructor.name);
            console.log('BioForm data submitted and parent state updated.. changing pages.');
            window.location.href = '/enrollment-form/citizenship';
        });



    }
    render(){//markup}
}

这会导致页面重新加载，从而重置您的所有状态（包括 Redux）并再次渲染所有内容：

window.location.href = '/enrollment-form/citizenship';

将其替换为：

this.props.history.push('/enrollment-form/citizenship')

请注意，您可能需要用以下内容包装您的组件带路由器像这样：

export default withRouter(EnrollForm);

随着导入：

import { withRouter } from "react-router";

希望能帮助到你。快乐编码！