How to use Redux Form Wizard with permanent URLS per page

user_149080 0
Viewed 730

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
redux-form react-redux reactjs
2 Answers

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.
user_15002410
Related