Estoy usando la gestión de estado llamada gestión de estado pequeño en mi React-Hook-Form. Primero creé esto en codesandbox antes de implementarlo en mi proyecto.
He envuelto mi App.js con StateMachineProvider
import React from "react"; import ReactDOM from "react-dom"; import "./index.css"; import App from "./App"; import reportWebVitals from "./reportWebVitals"; import { BrowserRouter } from "react-router-dom"; import { StateMachineProvider, createStore } from "little-state-machine"; createStore({ yourDetails: { firstName: "", lastName: "", address: "", number: "", }, }); ReactDOM.render( <React.StrictMode> <BrowserRouter> <StateMachineProvider> {" "} <App /> </StateMachineProvider> </BrowserRouter> </React.StrictMode>, document.getElementById("root") ); reportWebVitals(); Lo que estoy haciendo es un formulario de varios pasos. Luego puse las navegaciones para el Step1 y el Step2 dentro de App.js
<Routes> {!isLoading ? ( <> <Route path="/" element={ <MainLayout> <SignInPage /> </MainLayout> } /> <Route path="/Homepage" element={ <PrivateRoute> <Home /> </PrivateRoute> } /> <Route exact path="/step1" element={<Step1 />} /> <Route path="/step2" element={<Step2 />} /> </> ) : ( <> <Route path="/" element={ <MainLayout> <SignInPage /> </MainLayout> } /> </> )} </Routes>¿Estoy envolviendo la gestión del estado correctamente?