How to use Redux Form Wizard with permanent URLS per page

Question

I'm working to build a signup > profile setup flow for a new application which is using React + Redux.

I found the following example for a redux form wizard:

http://redux-form.com/6.7.0/examples/wizard/

This seems to be the closest example but the problem is each step in the wizard does not change the URL, so if the user clicks the browser's forward/back btn or refreshes their browser, it will break.

Would it be OK to make Redux form wizard have permanent URLs? How can I approach this as a beginner?

Something where the wizard has URLs like:

/wizard/name
/wizard/profile
/wizard/photo

Answer 1

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.

Answer 2

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:

    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.