How to make a page transition in react-router-dom?

Question

JavaScript

I do authorization, send a request with data, a token arrives in localstorage, everything works fine (almost), but does not go to the desired page (in this case, Main)

import React from 'react'
import { Routes, Route, Navigate } from 'react-router-dom'
import Home from './component/Home'
import Main from './component/Main'


 export const useRoutes = (isLogin) => {
     if(isLogin){
          return (
           <Routes>
                      <Route path="/login" element={<Main/>}/>
            </Routes>
         )
     }
    
         return (
        <Routes>
            <Route path="/" element={<Home/>}/>
            <Route path="*" element={<Navigate to="/"/>}/>
        </Routes>
         )
     
}

It needs to go to the Main page if isLogin=true

Thanks in advance!

Answer 1

Use the useNavigate
method Example:

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

function SignupForm() {
  let navigate = useNavigate();

  async function handleSubmit(event) {
    event.preventDefault();
    await submitForm(event.target);
    navigate("../success", { replace: true });
  }

  return <form onSubmit={handleSubmit}>{/* ... */}</form>;
}