How to share props to a different route using react-router-dom?

Question

I am trying to share my props (data, saveWorkButtonClicked, updateFBRDB) from <ProjectPage /> component route to <Indent /> component route.

But getting the following 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.

App.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 />

Indent.js

export default function Indent({ data, saveWorkButtonClicked, updateFBRDB }) {
    console.log('data in indent', data)
}

NOTE: Please give solutions where this can be implemented without Context/ Redux/ Mobx. Also, I am using react-router-dom v5.2.0

Answer 1

I would suggest an workaround. Have a state which keeps track of when you want to move to next page, so that we can use Redirect component conditionally with your desired data as props.

App.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>
)

Answer 2

If you want to "share" props, you need to do one of two things. Either have the receiving component be a child of the propsharing component - in which case you can pass them as props directly. Else, you would need to pass them as state via a common ancestor component, which you would need to update by sending a callback down to the component that will update the state.

Answer 3

You can pass state to location with this format

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)

And then using withRouter to receive location values

import { withRouter } from 'react-router'

function Indent({ location }) {
    const { state } = location
    const { data, saveWorkButtonClicked, updateFBRDB } = state || {}
 
    return <></>
}

export default withRouter(Indent)