Programmatically navigate using React Router!

In React Router, you can programmatically navigate by using the useNavigate hook (in React Router v6 and above) or the history object (in earlier versions like React Router v5).

React Router v6 (and newer)

In React Router v6, the useNavigate hook is used to programmatically change routes.

Example:

#jsx #react
import React from 'react';
import { useNavigate } from 'react-router-dom';

function MyComponent() {
  const navigate = useNavigate();

  const goToHomePage = () => {
    navigate('/home');  // Navigate to /home route
  };

  const goToPageWithState = () => {
    navigate('/profile', { state: { from: 'dashboard' } });  // Navigate with state
  };

  const goBack = () => {
    navigate(-1);  // Go back to the previous page
  };

  return (
    <div>
      <button onClick={goToHomePage}>Go to Home</button>
      <button onClick={goToPageWithState}>Go to Profile</button>
      <button onClick={goBack}>Go Back</button>
    </div>
  );
}

export default MyComponent;

In this example:

• navigate('/home') moves the user to the /home route.
• navigate('/profile', { state: { from: 'dashboard' } }) navigates to /profile while passing some state.
• navigate(-1) navigates back to the previous page, similar to the browser’s back button.

React Router v5 (and older)

In React Router v5, you use the useHistory hook or the history object to navigate programmatically.

Example:

#jsx #react
import React from 'react';
import { useHistory } from 'react-router-dom';

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

  const goToHomePage = () => {
    history.push('/home');  // Navigate to /home route
  };

  const goToPageWithState = () => {
    history.push('/profile', { from: 'dashboard' });  // Navigate with state
  };

  const goBack = () => {
    history.goBack();  // Go back to the previous page
  };

  return (
    <div>
      <button onClick={goToHomePage}>Go to Home</button>
      <button onClick={goToPageWithState}>Go to Profile</button>
      <button onClick={goBack}>Go Back</button>
    </div>
  );
}

export default MyComponent;

In this example:

• history.push('/home') navigates to the /home route.
• history.push('/profile', { from: 'dashboard' }) navigates to /profile with some state.
• history.goBack() functions the same as the browser’s back button.

Review:

• React Router v6+: Use useNavigate.
• React Router v5: Use useHistory.

These hooks provide an easy way to handle navigation in response to user actions or events programmatically.

How Coding Filters Improve Code Efficiency!

Coding filters enhance the efficiency of code by allowing developers to target and process only relevant data. This reduces the need for unnecessary loops, conditional checks, and repetitive logic, leading to faster execution times and optimized resource usage in your applications.