Estoy tratando de compartir mis accesorios ( data, saveWorkButtonClicked, updateFBRDB ) desde la ruta del componente <ProjectPage /> a la ruta del componente <Indent /> .
Pero obteniendo el siguiente error:
Uncaught DOMException: Failed to execute 'pushState' on 'History': async (data, setSpinner, updateFBRDB) => { setSpinner && setSpinner(true); let rawRoomData = String.raw`${J...<omitted>... } could not be cloned.Aplicación.js
<Router> <Switch> <Route path="/ProjectPage/:projectId" exact component={ProjectPage} /> <Route path="/Indent/" render={(props) => <Indent {...props} />} /> </Switch> </Router>ProjectPage.js
history.push("/Indent/", { data: { ...project, rooms: project.rooms, ProjectId: project.ProjectId, ClientName: project.ClientName, Address: project.Address, AmountRecieved: project.AmountReceived, SiteEngineerId: project.SiteEngineersId }, saveWorkButtonClicked, updateFBRDB, } ) // saveWorkButtonClicked & updateFBRDB are API calls which will be called in <Indent />Sangría.js
export default function Indent({ data, saveWorkButtonClicked, updateFBRDB }) { console.log('data in indent', data) }NOTA: Proporcione soluciones donde esto se pueda implementar sin Context/ Redux/ Mobx. Además, estoy usando react-router-dom v5.2.0
Yo sugeriría una solución. Tenga un estado que realice un seguimiento de cuándo desea pasar a la página siguiente, de modo que podamos usar el componente Redirect condicionalmente con los datos deseados como accesorios.
Aplicación.js
<Router> <Switch> <Route path="/ProjectPage/:projectId" exact component={ProjectPage} /> </Switch> </Router>ProjectPage.js
const [isDone, setIsDone] = useState(false); const handleClick = () => { // Do all your works, when you want to `push` to next page, set the state. setIsDone(true); } if(isDone) { return ( <> <Route path="/Indent" render={ props => <Indent {...props} data={...} saveWorkButtonClicked={saveWorkButtonClicked} updateFBRDB={updateFBRDB} /> } /> <Redirect to="/Indent" /> </> ); } return ( <div>Your Normal Profile Page goes here</div> )Si desea "compartir" accesorios, debe hacer una de dos cosas. Haga que el componente de recepción sea un elemento secundario del componente de uso compartido, en cuyo caso puede pasarlos como accesorios directamente. De lo contrario, deberá pasarlos como estado a través de un componente antepasado común, que deberá actualizar enviando una devolución de llamada al componente que actualizará el estado.
Puede pasar state a location con este formato
const location = { pathname: '/Indent/', state: { data: { ...project, rooms: project.rooms, ProjectId: project.ProjectId, ClientName: project.ClientName, Address: project.Address, AmountRecieved: project.AmountReceived, SiteEngineerId: project.SiteEngineersId }, saveWorkButtonClicked, updateFBRDB, } } history.push(location) Y luego usar withRouter para recibir valores de ubicación
import { withRouter } from 'react-router' function Indent({ location }) { const { state } = location const { data, saveWorkButtonClicked, updateFBRDB } = state || {} return <></> } export default withRouter(Indent)