Route based wizard

[tommy92]

Is there any way to couple react-use-wizard with route-based views separate for each step?

Let's say I'm using Next.js and the structure would look like this:

/pages
  _app.tsx
  step1.tsx
  step2.tsx

and then:

// _app.tsx
import { Wizard } from 'react-use-wizard';

const MyApp = ({ children }) => (
  <Wizard>{children}</Wizard>
)

// step1.tsx
import { useWizard } from 'react-use-wizard';

const Step1 = () => {
  const { stepCount } = useWizard();

  console.log(stepCount) // should return 2, but actually returns 1

  return ...
}