Navigating with React Router

React Router is a popular library for managing client-side routing in React applications. One of its key features is the ability to programmatically navigate between routes. In this tutorial, we’ll explore how to use React Router’s navigation APIs to redirect users to different routes.

Introduction to React Router Navigation

In React Router, navigation is achieved through the history object. The history object provides methods for manipulating the browser’s URL and navigating between routes. There are several ways to access the history object, depending on your application’s architecture.

Using the withRouter Higher-Order Component

One way to access the history object is by using the withRouter higher-order component (HOC). The withRouter HOC wraps a component and provides it with the history object as a prop.

import React from 'react';
import { withRouter } from 'react-router-dom';

class MyComponent extends React.Component {
  handleClick = () => {
    this.props.history.push('/new-url');
  };

  render() {
    return (
      <button onClick={this.handleClick}>Navigate to new URL</button>
    );
  }
}

export default withRouter(MyComponent);

In this example, the MyComponent component is wrapped with the withRouter HOC. The handleClick method uses the history object to navigate to a new URL.

Using the useHistory Hook

Another way to access the history object is by using the useHistory hook, which is available in React Router v5 and later.

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

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

  const handleClick = () => {
    history.push('/new-url');
  };

  return (
    <button onClick={handleClick}>Navigate to new URL</button>
  );
}

In this example, the useHistory hook is used to get the history object, which is then used to navigate to a new URL.

Accessing the history Object through Route Props

If your component is directly connected to a route, you can access the history object through the route props.

import React from 'react';

const MyComponent = ({ history }) => {
  const handleClick = () => {
    history.push('/new-url');
  };

  return (
    <button onClick={handleClick}>Navigate to new URL</button>
  );
};

export default MyComponent;

In this example, the MyComponent component is directly connected to a route and receives the history object as a prop.

Creating a Custom History Object

If you need more control over the navigation flow, you can create a custom history object using the createBrowserHistory function from the history package.

import { createBrowserHistory } from 'history';

const history = createBrowserHistory();

// Use the custom history object to navigate
history.push('/new-url');

In this example, a custom history object is created using the createBrowserHistory function. The custom history object can be used to navigate between routes.

Conclusion

In conclusion, React Router provides several ways to access the history object and navigate between routes. By using the withRouter HOC, the useHistory hook, or accessing the history object through route props, you can easily manage navigation in your React application. Additionally, creating a custom history object can provide more control over the navigation flow.