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:
- useHistory() hook
- withRouter() HOC
- context.router.history.push()
- 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.