How do you redirect a user to a different route in React Router

Question

Can i know How do you redirect a user to a different route in React Router?

Answer 1

Redirecting a User in React Router

1. Using <Navigate> (React Router v6)

import { Navigate } from "react-router-dom";

const Login = () => {

  const isAuthenticated = true; // Example condition

  if (isAuthenticated) {

    return <Navigate to="/dashboard" replace />;

  }

  return <h1>Login Page</h1>;

};

export default Login;

2. Using useNavigate Hook (React Router v6)

import { useNavigate } from "react-router-dom";

const Home = () => {

  const navigate = useNavigate();

  return (

    <button onClick={() => navigate("/dashboard")}>Go to Dashboard</button>

  );

};

export default Home;

3. Redirect in useEffect (React Router v6)

import { useEffect } from "react";

import { useNavigate } from "react-router-dom";

const ProtectedPage = () => {

  const navigate = useNavigate();

  useEffect(() => {

    navigate("/login"); // Redirects to login if unauthorized

  }, [navigate]);

  return <h1>Protected Content</h1>;

};

export default ProtectedPage;