Author: John Au-Yeung

Sometimes, we want to pass parameters with history.push, Link, or Redirect in React Router v4.

In this article, we’ll look at how to pass parameters with history.push, Link, or Redirect in React Router v4.

How to pass parameters with history.push, Link, or Redirect in React Router v4?

To pass parameters with history.push, Link, or Redirect in React Router v4, we can set the state property.

For instance, we write

this.props.history.push({
  pathname: '/template',
  search: '?query=abc',
  state: {
    detail: response.data
  }
})

to call history.push with an object with the state property to pass props to the history object.

With the Link, component, we write

<Link
  to={{
    pathname: "/template",
    search: "?query=abc",
    state: { detail: response.data },
  }}
>
  My Link
</Link>

to set the to prop to an object with the state property containing the data that we want to pass into the route component as props.

Conclusion

To pass parameters with history.push, Link, or Redirect in React Router v4, we can set the state property.

Sometimes, we want to push to History in React Router v4.

In this article, we’ll look at how to push to History in React Router v4.

How to push to History in React Router v4?

To push to History in React Router v4, we can use the createBrowserHistory method to return the history object.

Then we can call push on the history object.

For instance, we write

history.js

import {
  createBrowserHistory
} from 'history';

export default createBrowserHistory();

to add a module that returns the history object returned from createBrowserHistory.

Then we add some routes with

app.js

import { Router, Route, Link } from 'react-router-dom';
import history from './history';

ReactDOM.render(
  <Provider store={store}>
    <Router history={history}>
      <div>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/login">Login</Link></li>
        </ul>
        <Route exact path="/" component={HomePage} />
        <Route path="/login" component={LoginPage} />
      </div>
    </Router>
  </Provider>,
  document.getElementById('root'),
);

And then we can navigate in our code with

actionCreators.js

import history from '../history';

export const login = (credentials) => {
  return async (dispatch) => {
    await loginRemotely(credentials)
    //...
    history.push('/');
  };
}

We call history.push to push to the history and navigate by importing the history object with the import statement and call push on it.

Conclusion

To push to History in React Router v4, we can use the createBrowserHistory method to return the history object.

Then we can call push on the history object.