How can I redirect in React Router v6?

I found another way to do this:

import { useNavigate } from "react-router-dom";
let navigate = useNavigate();

useEffect(() => {
   if (LoggedIn){
      return navigate("/");
   }
},[LoggedIn]);

See Overview, Navigation.

Create the file RequireAuth.tsx

import { useLocation, Navigate } from "react-router-dom";
import { useAuth } from "../hooks/Auth";

export function RequireAuth({ children }: { children: JSX.Element }) {
  let { user } = useAuth();
  let location = useLocation();

  if (!user) {
    return <Navigate to="/" state={{ from: location }} replace />;
  } else {
    return children;
  }
}

Import the component to need user a private router:

import { Routes as Switch, Route } from "react-router-dom";

import { RequireAuth } from "./RequireAuth";
import { SignIn } from "../pages/SignIn";
import { Dashboard } from "../pages/Dashboard";

export function Routes() {
  return (
    <Switch>
      <Route path="/" element={<SignIn />} />
      <Route
        path="/dashboard"
        element={
          <RequireAuth>
            <Dashboard />
          </RequireAuth>
        }
      />
    </Switch>
  );
}

In version 5 of React, i.e., react-router-dom, we had the Redirect component. But in version 6 of React it is updated to the Navigate components.

We can pass replace in these components to avoid unnecessary redirects on clicking back and forward option.

Demonstration for usage is attached below:

<Route path="/" element={user ? <Home /> : <Register />} />
<Route path="/login" element={user ? <Navigate to="/" replace /> : <Login />} />
<Route path="/register" element={user ? <Navigate to="/" replace /> : <Register />} />

FOR react-router VERSION 6

New example after editing----->(more simple easy to read)

import {BrowserRouter as Router,Routes,Route} from 'react-router-dom';
import Home from '../NavbarCompo/About';
import Contact from '../NavbarCompo/Contact';
import About from '../NavbarCompo/About';
import Login  from '../NavbarCompo/Login';
import Navbar from '../Navbar/Navbar';
import Error from '../pages/error';
import Products  from '../pages/products';
import Data from '../NavbarCompo/Data';

const Roter=()=>{
    return (
    <Router>

            <Navbar />
        <Routes>
            
            <Route path='/' element={<Home />} />
            <Route path='/about' element={<About />} />
            <Route path='/contact' element={<Contact />} />
            <Route path='/login' element={<Login />} />
            <Route path='/product/:id' element={<Products />} />
            <Route path='/data' element={<Data />} />
            <Route path ='*' element={<Error />} />
        </Routes>


    </Router>
    )
}
export default Roter;

Look at the example

import React from "react";
import Form from "./compo/form";
import ReactDOM from "react-dom/client";
import { createBrowserRouter, RouterProvider, Route,Routes,Navigate } from "react-router-dom";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Form />
  },
  {
    path: "/about",
    element: <h1>hola amigo,you are in about section</h1>
  },
  {
    path:"*",
    element:<Navigate to="/" replace />
  }
]);

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
  <React.StrictMode>
    <RouterProvider router={router}></RouterProvider>
  </React.StrictMode>
);

check this out https://reactrouter.com/en/main/start/overview

      <BrowserRouter>
        <Routes>
          <Route path="home" element={<Home />} />
          <Route path="about" element={<About />} />
          <Route index element={<Navigate to="/home" replace />} />
        </Routes>
      </BrowserRouter>

import { useNavigate } from "react-router-dom";
import { Button } from "@mui/material";

const component =()=>{

    const navigate = useNavigate();

    const handelGoToLogin = () => {
        navigate('/auth/login')
    }

    return(<>
        //.........
    
        <Button onClick={handelGoToLogin} variant="outlined" color="primary" size="large" fullWidth>
             Back
        </Button>

    </>)
}

You can use the Navigate component from react-router-dom to achieve the same effect as Redirect. First, import { Navigate } from 'react-router-dom' Here's an example:

<Route path="/" element={<Navigate to="/todos" replace />} />

The replace is used to replace the current history entry instead of adding a new entry.

I was facing the issue of redirecting the user to /login if the user tries to access the dashboard without login .First I use the

Navigate('/login')

but it's not the correct way as it render the page first and then redirects to login so then I used another approach which is as follow.

    const auth  = useContext(AuthContext);

if(!auth?.loggedin){
  
    return <Navigate to='/login'></Navigate>
}return children;

import { useState } from "react"
import { Navigate } from "react-router-dom"
const [login, setLogin] = useState(true)
return (<>
{!login && <Navigate to="/login" />}
<>)

In React Router v6, we can use <Navigate /> like the other answer to redirect.

However, in that case, if we have used params/slug for example /users/:id in the path then it will redirect from /users/10 to /new-path/:id instead of /new-path/10.

To resolve such cases, we can have a custom component like below:

// Redirect.tsx

import { useEffect } from 'react'
import { generatePath, useNavigate, useParams } from 'react-router-dom'

function Redirect({ to }: { to: string }) {
  const navigate = useNavigate()
  const params = useParams()

  useEffect(() => {
    navigate(generatePath(to, params), { replace: true })
  })

  return null
}

export default Redirect

And we can import it like:

<Route path="/users/:id" element={<Redirect to="/new-path/:id" />} />

For class components, at the first you should make a functional component, and then use HOC technical to use useNavigate React hook.

Like this:

File withrouter.js

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

export const withRouter = WrappedComponent => props => {
    return (<WrappedComponent {...props} navigate={useNavigate()}/>);
};

Then use it in other class components like this:

export default withRouter(Signin);

And use props for redirect like this:

this.props.navigate('/');

For react-router-dom version 5.3 I used useHistory().

Sample code

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

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

  const redirectToOverview = () => {
    // Use the history.push method to navigate to /app/overview
    history.push('/app/overview');
  };

  return (
    <div>
      {/* When this button is clicked, redirectToOverview will be called */}
      <button onClick={redirectToOverview}>Go to Overview</button>
    </div>
  );
}

export default MyComponent;