How to Redirect to Another Page in React.js?

In React.js, you can redirect to another page using various methods, depending on how you’re managing routing in your application. If you’re using React Router, which is the most common library for handling routing in React, here are the ways to perform a redirection:

1. Using useNavigate (React Router v6 and above)

In React Router v6, useNavigate is the hook used to programmatically navigate to another page.

AND

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

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

  const redirectToHome = () => {
    navigate('/home');  // Redirects to /home page
  };

  return (
    <div>
      <button onClick={redirectToHome}>Go to Home</button>
    </div>
  );
};

export default MyComponent;

In this exercise, the useNavigate hook is used to programmatically navigate to a new route (/home).

2. Using useHistory (React Router v5)

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

AND

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

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

  const redirectToHome = () => {
    history.push('/home');  // Redirects to /home page
  };

  return (
    <div>
      <button onClick={redirectToHome}>Go to Home</button>
    </div>
  );
};

export default MyComponent;

The history.push method is used to push a new route to the history stack, causing the app to navigate to the specified path (/home in this case).

3. Using <Navigate /> (React Router v6)

If you need to redirect immediately as part of the component rendering (e.g., after a login or form submission), you can use the <Navigate /> component in React Router v6.

Exercise:

#reactjs #jsx
import { Navigate } from 'react-router-dom';

const MyComponent = () => {
  const isAuthenticated = true;  // condition

  if (isAuthenticated) {
    return <Navigate to="/home" />;  // Automatically redirects to /home
  }

  return <div>Please log in.</div>;
};

export default MyComponent;

In this case, the <Navigate /> component is used to redirect to the /home route if the condition (isAuthenticated) is met.

4. Redirecting After a Form Submission (React Router v5)

In React Router v5, after a form submission or other event, you might want to redirect the user. You can do so by using the history object in the event handler.

Exercise:

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

const LoginForm = () => {
  const [username, setUsername] = useState('');
  const history = useHistory();

  const handleSubmit = (e) => {
    e.preventDefault();
    // After form submission logic, redirect to /dashboard
    history.push('/dashboard');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
        placeholder="Enter username"
      />
      <button type="submit">Login</button>
    </form>
  );
};

export default LoginForm;

Note:

• React Router v6: Use useNavigate() for programmatic navigation and <Navigate /> for immediate redirection.
• React Router v5: Use useHistory() to programmatically navigate with history.push().

Make sure you’re using the appropriate method for the version of React Router that you’re working with.

Developers Simplify Complex Code at Coding Filters!

Developers often struggle with overly complex code that is hard to maintain and debug. By applying coding filters, developers can break down complex tasks into smaller, more manageable pieces, resulting in simpler, cleaner code. Filters help to target specific data or processes, enhancing both performance and readability.