How to use Redux Form Wizard with permanent URLS per page

Would it be OK to make Redux form wizard have permanent URLs?

The way how it's implemented depends on every use case. I don't see any problem why it wouldn't be ok.

The wizard example tells you everything you need to know regarding your approach.

Talking about the official example, you could approach this in the following way:

• Create a /wizard/name route which would render the same WizardForm.js component;
• If the subpath is /name, render the WizardFormFirstPage
• Same for the other subpaths.

I recently implemented a redux-form wizard with client-side routing. I will share some of the details here for posterity...

I have a component called MainContent which has several React-Router 4 routes. One of these routes looks like this:

<Route path={'/profile/:profileSection'} component={Profile} />.

This route loads a "wizard" style redux-form that the user fills out to set up her profile.

Note the profileSection route parameter. If the current URL is: https://www.myawesomeapp.com/profile/my-age, the Profile component will receive a profileSection prop from the router with a (string) value of 'my-age'. This would be used to load the form "step" that asks the user her age.

Profile is a stateful component. Its render method returns the wrapped components for each step. It looks roughly this like this:

render(){ return ( <div> <Step1 {...this.state} {...this.props} /> <Step2 {...this.state} {...this.props} /> <Step3 {...this.state} {...this.props} /> </div> ) }

The profileSection router prop gets passed into each of the "step" components. These step components are created from an HOC. The HOC decorates each component with the following behavior:

1. Match a regular expression against the profileSection prop.
2. If it matches, the component's render method returns the markup for said step.
3. if it does not match, the component's render method returns null.

Hopefully this will help someone in the future...