0

I have built a multistep wizard to allow people to configure a smart device. When the user has completed the wizard, they may need to configure another device so I send them back to the first step in the wizard. The problem is that whatever page I am on will reflect its most recent screen state, and I want to be able to reset the entire app back to its default state, which obviously includes having all of its pages reset back to their initial states. How can I reset the app itself back to its original default state? I am using React 18.2.0.

The shape of the app is like this. Each step is a route to a component which can contain multiple screens:

<IonApp>
    <IonReactRouter>
      <IonSplitPane contentId="main" when="xs">
        <Menu />
        <IonRouterOutlet id="main">
          <Route path="/bluetooth" exact={true}>
            <Bluetooth />
          </Route>
          <Route path="/wifi" exact={true}>
            <WiFi />
          </Route>
          <Route path="/initialize" exact={true}>
            <Initialize />
          </Route>
        </IonRouterOutlet>
      </IonSplitPane>
    </IonReactRouter>
  </IonApp>
Joel Joel Binks
  • 1,628
  • 5
  • 27
  • 47
  • https://stackoverflow.com/questions/35792275/how-to-force-remounting-on-react-components – Konrad Dec 14 '22 at 21:00
  • [This](https://stackoverflow.com/questions/21749798/how-can-i-reset-a-react-component-including-all-transitively-reachable-state) might help you. – c0m1t Dec 14 '22 at 21:00
  • Can you share some code here? Thanks – NazaRN Dec 14 '22 at 21:01
  • @c0m1t I looked at this earlier, but it's unfortunately an outdated solution. – Joel Joel Binks Dec 14 '22 at 21:10
  • @NazaRN I added the basic shape of the app to my question – Joel Joel Binks Dec 14 '22 at 21:20
  • React does recreate a component if its key changes. The component will be unmounted, and mounted again. Meaning if you using `useState` in a component, the state will be set to the default value. I'm not sure how your code works, maybe you are using a state management library. In that case you need to reset the state manually. Or you may be storing your state in another component or context. – c0m1t Dec 14 '22 at 21:27
  • @c0m1t I do use useState(). It sounds like I need to somehow access every component from the last page in the wizard then update their key once I've hit the button to return to the beginning. – Joel Joel Binks Dec 14 '22 at 21:33
  • Again I'm not really sure how you have implemented your code. Probably it should work. Or you could set the state to the initial value when the user completes the wizard. Call a function that resets the state. It maybe easier to use reducer in your case. Your wizard steps components do not unmount/mount again when the user goes to the next/previous step, right? – c0m1t Dec 14 '22 at 21:40
  • They do not unmount/mount, no. Perhaps that is a potential solution as well. – Joel Joel Binks Dec 14 '22 at 22:00
  • 1
    `location.reload()`? – Chris Hamilton Dec 14 '22 at 22:35
  • @ChrisHamilton Yep, that's what I ultimately decided to do! I don't like this solution but it absolutely works. – Joel Joel Binks Dec 16 '22 at 16:53

0 Answers0