How Can I Pass A State From One React Route To Another React Route?

I am building an app with multiple routes so as you can guess i need to transfer data between different routes, I am using react-router-dom to navigate/redirect between those route

Solution 1:

This is an interesting question, there're ways.

Url state

import { useHistory } from'react-router-dom'constComponent = () => {
  const history = useHistory()
  ...
  history.push('/bulletin', { type: 'success' });
}

This type will show up under that route

import { useLocation } from'react-router-dom'constComponent = () => {
  const location = useLocation()
  const { type } = location.state

Local storage

Save it somewhere in local storage inside browser and then next route pick it up.

Server storage

Call an api to save that info, so next route will pick it up via another api call.

Coupled way

All above are decoupled way which should be scalable. Sometimes you can wire two routes physically together, ex. just reuse it again the second component in first component.