Redux-Form is not connected to Router correctly - reactjs

Question

I'm trying to initialize data into form, show the form and navigate to other component (manually). After I successfully load data into form I found myself in a dead end, that I am unable to navigate to another component because I am getting TypeError: path.lastIndexOf is not a function error.
I am using redux-form and component is connected via withRouter.
I tried to workaround it with changing to React.Component, but after I managed to get data into form and connect component with Router, data in the form was unable to change (I was unable to even interact with the form). So I switched back to old solution that gave me that error.
Used versions:
"react-redux": "^6.0.0",
"react-router-dom": "^4.3.1",
"redux": "^4.0.1",
"redux-form": "^8.1.0",
"redux-thunk": "^2.3.0",
userProfile.jsx
const renderField = ({
input,
label,
placeholder,
type,
meta: { touched, error },
...rest
}) => (
<div>
<label htmlFor={label}>{label}</label>
<div>
<input {...input} {...rest} type={type} />
{touched
&& ((error && <span className="error-text">{error}</span>))}
</div>
</div>
);
let userProfile = (props) => {
const {
handleSubmit, pristine, submitting, reset,
} = props;
const confirmTitle = 'Are you sure about clearing the changed values?';
const confirmDescription = 'Please notice that you can lose the data you edited';
return (
<div className="container__form" style={{ height: '160vh' }}>
<Confirm title={confirmTitle} description={confirmDescription}>
{ confirm => (
<form className="extended-form" onSubmit={handleSubmit}>
<h3> Personal Data </h3>
<div className="form-control">
<Field
name="username"
type="text"
component={renderField}
label="User name"
disabled
/>
</div>
<div className="form-control">
<Field
name="email"
type="text"
component={renderField}
label="E-mail"
disabled
/>
</div>
<div className="form-control">
<Field
name="user.firstName"
type="text"
component={renderField}
label="First Name"
validate={required()}
/>
</div>
<div className="form-control">
<Field
name="user.lastName"
type="text"
component={renderField}
label="Last Name"
validate={required()}
/>
</div>
<div>
<div className="form-actions">
<button type="submit" disabled={submitting}>
Submit
</button>
{/* </div>
<div className="form-actions"> */}
<button type="button" disabled={pristine || submitting} onClick={confirm(() => reset())}>
Cancel
</button>
</div>
</div>
</form>
)}
</Confirm>
</div>
);
};
export default compose(
withRouter,
connect(
state => ({
...state,
initialValues: state.user.data,
}),
),
reduxForm({
form: 'userProfileForm',
enableReinitialize: true,
}),
)(userProfile);
UserProfileComponent.jsx
const UserProfileComponent = (props) => {
const sendData = (data) => {
props.clearErrors();
props.updateUserData(data);
};
const { errors } = props;
return (
<div className="extended">
<h2> Extended Register process </h2>
<div className="tooltip"> i </div>
<span className="pale-magenta-text"> The mandatory fills are indicated by a * in the right site of the field name </span>
<UserProfile onSubmit={sendData} />
<br />
{errors && (<div className="error-text">{errors.error}</div>)}
</div>
);
};
const mapStateToProps = state => ({
...state,
errors: state.errors,
});
const mapDispatchToProps = dispatch => ({
updateUserData: data => dispatch(updateUserData(data)),
clearErrors: () => dispatch(clearErrors()),
});
export default connect(
mapStateToProps,
mapDispatchToProps,
)(UserProfileComponent);
I expect initialize of the form to be working and also, that I am connected to the Router correctly.
The problem is I think in HOC, because when I change the order of reduxForm and connect, I can navigate but I cannot see any data initialized into form. But that's sadly my dead end I cannot move from. Thanks a lot for any help or suggestion.

Answer 1

I did a lot of debug and changes and finally I found a way how to make it all work.
It's maybe not the best answer, but it can help someone with the same problem:
I removed withRouter (as it was not needed anymore) and changed the order of HOC in UserProfile.jsx to match:
export default compose(
reduxForm({
form: 'userProfileForm',
enableReinitialize: true,
}),
connect(
state => ({
...state,
initialValues: state.user.data,
}),
),
)(userProfile);
I hard coded initialValues in UserProfileComponent.jsx* to match:
<UserProfile onSubmit={sendData} initialValues={props.user.data}/>
Now the data is loaded, user can interact with the form (validation is working) and also, user can fully navigate in the site with no errors.
I hope it helps someone to solve same or similar problem that I had.
Enjoy