Programmatically Navigate Using React Router

Introduction

In this article we will learn about React-router, and what is router. Programmatic navigation in React Router refers to the process of dynamically navigating to different routes in a React application using JavaScript code, rather than using standard navigation controls like links. ...but what does that really mean? As we all know, React is the most popular programming language in the market. Okay, let's move on.

What is the Routing?

• Routing is the one of features of React programming language
• That enables navigation between different pages or components in a React application
• Routing directs users to different pages based on their actions or requests.
• React Router, a popular routing library for React, is mainly utilized for building Single Page Applications.
• It enables the definition of multiple routes within the application.

React Router, a popular routing library for React, provides the following key features

• Dynamic Routing
  Allows mapping dynamic URL paths to components, making it possible to pass parameters from the URL to the component.
• Nested Routing
  Supports the nesting of routes, making it possible to organize complex applications with multiple views.
• URL Synchronization
  Keeps the UI in sync with the URL, providing a seamless experience for users and allowing the use of the browser's back and forward buttons.
• Programmatic Navigation
  Provides methods for programmatically navigating to different routes in response to events within the application like this article about Programmatic Navigation.
• Link Component
  A component for creating links that navigate to different routes in the application, allowing for semantic and accessible navigation.
• Switch Component
  A component that renders the first route that matches the URL, making it easier to handle 404 pages and other error conditions.
• Route Guarding
  Allows for the conditional rendering of components based on certain conditions, such as authentication status or permission levels.
• Server-side Rendering
  Supports server-side rendering, allowing for improved performance and SEO optimization.

React Programmatic Routing

React Router provides the following methods to programmatically navigate:

1. useHistory() hook
2. withRouter() HOC
3. context.router.history.push()
4. The useHistory hook returns the history object from the React Router, which has a push method that can be used to navigate to a different route.

1. useHistory() hook

The useHistory hook is a widely used feature offered by React Router, allowing access to the history object utilized by the library. This object provides methods to programmatically navigate through routes in the React application.

import { useHistory } from 'react-router-dom';
const history = useHistory();
history.push('/new-route');

2. withRouter() HOC

The withRouter Higher Order Component (HOC) gives access to the history object and can be used to programmatically navigate.

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

class MyComponent extends React.Component {
  handleNavigation = () => {
    this.props.history.push('/new-route');
  };
  render() {
    return <button onClick={this.handleNavigation}>Go to new route</button>;
  }
}
export default withRouter(MyComponent);

3.context.router.history.push()

The context.router.history.push() method can be used with the context object to programmatically navigate.

import { withRouter } from 'react-router-dom';
class MyComponent extends React.Component {
    static contextTypes = {
        router: PropTypes.object.isRequired
    };
    handleNavigation = () => {
        this.context.router.history.push('/new-route');
    };
    render() {
        return < button onClick = {
            this.handleNavigation
        } > Go to new route < /button>;
    }
}
export default withRouter(MyComponent);

Summary

In this article, you learned how to implement Rect Programmatic routings and routing key features also. Please use the comments section if you have any clarification.