问题是登录时的“useNavigate”挂钩，我想重定向到Profil组件，而不丢失redux存储的全局状态。
这是我的应用程序组件

import Profile from './components/Profile.jsx';
import Login from './components/Login.jsx';
import Register from './components/Register.jsx';
import { Routes, Route } from 'react-router-dom';

function App() {
  return (
<>
    <Routes>
      <Route path='/login' element={ <Login />  } />
      <Route path='/register' element={ <Register />  } />
      <Route path='/profile' element={ <Profile />  } />
    </Routes>
</>
  );
}
export default App

这是我的登录组件：

import React, { useState } from "react";
import { useNavigate } from 'react-router-dom';
import { useLoginMutation } from "../services/api";

const Login = (props) => {

  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");

  const redirect = useNavigate();

  const [login, { isLoading }] = useLoginMutation();

  const onChangeUsername = (e) => {
    const username = e.target.value;
    setUsername(username);
  };
  const onChangePassword = (e) => {
    const password = e.target.value;
    setPassword(password);
  };

  const loginHandler = async (e) => {
    e.preventDefault();

      try {
        const response = await login({ username, password }).unwrap()
        if (response.data.accessToken) {
        localStorage.setItem("user", JSON.stringify(response.data));
      }
      redirect('/profile');

    } catch (err) {

      console.log(err);
    }

  };

  return (
    <div className="col-md-12">

      <div className="card card-container">
        <img
          src="//ssl.gstatic.com/accounts/ui/avatar_2x.png"
          alt="profile-img"
          className="profile-img-card"
        />

        <form className='flex flex-col justify-around' >

              <>
                <label>Username</label>
                <input value={username} name="username" placeholder='username' onChange={onChangeUsername} className='p-1' />
                <label>Password</label>
                <input value={password} name="password" placeholder='password' onChange={onChangePassword} className='mb-3 p-1' />

                <button className='bg-blue-400 p-2 border rounded-md text-white font-bold ' onClick={loginHandler}>Login</button>

              </>

        </form>

      </div>
    </div>
  );
};

export default Login

这是一个截图。

提交后，删除突变

我知道在重定向时，页面会重新加载，但我不知道如何在不重新加载的情况下导航