React router, pass data when navigating programmatically?

The current answers are outdated.

React Router 6:

Use the useNavigate hook:

const navigate = useNavigate();
navigate('/other-page', { state: { id: 7, color: 'green' } });

Then, you can access the state data in '/other-page' via the useLocation hook:

const {state} = useLocation();
const { id, color } = state; // Read values passed on state

React Router 4 or 5:

Call history.push, and pass an object as the 2nd param to pass state:

props.history.push('/other-page', { id: 7, color: 'green' }))

Then, you can access the state data in '/other-page' via:

props.location.state

For functional component and react-router-dom:^5.2.0 let's take a very simple example to make the concept precise

import { useHistory } from "react-router-dom";

  function Sender(){ 
  
  const history = useHistory();

  const goToReceiver = () => {
    history.push("/receiver", { name:'Mr',age:23 });
  }

  return <button onClick={goToReceiver}>Go To Receiver</button>
  }

Now lets see how tha data came to receiver route

  import { useLocation } from "react-router-dom";

  function Receiver(){ 
  
  const location = useLocation();

    return <div>
             <p>{location.state.name}</p>
             <p>{location.state.age}</p>
           </div>
  }

React Router uses location objects. One of the properties of a location object is state.

this.props.router.push({
  pathname: '/other-page',
  state: {
    id: 7,
    color: 'green'
  }
})

On the page that is navigated to, the current location will be injected into the component whose route matched, so you can access the state using this.props.location.state.

One thing to keep in mind is that there will be no state if a user navigates directly to the page, so you will still need some mechanism to load the data when it does not exist.