useNavigate() only changes URL

[quietCoder500]

Hi! So I was building the login for my react website and I am having trouble with redirecting from the /login to /dashboard. When I submit the sign in form changes to /dashboard but the DOM doesn't change. Any suggestions? Here is some of the code:

Login.js

import PropTypes from 'prop-types';
import { NavLink, useNavigate } from 'react-router-dom'
import {  signInWithEmailAndPassword   } from 'firebase/auth';
import { auth } from '../../firebase';
import './Login.css';


export default function Login({ setToken }) {
  const navigate = useNavigate();
  const [email, setEmail] = useState();
  const [password, setPassword] = useState();

  const handleSubmit = async e => {
    e.preventDefault();
    signInWithEmailAndPassword(auth, email, password)
        .then((userCredential) => {
            // Signed in
            const user = userCredential.user;
            navigate("/dashboard")
            console.log(user);
            setToken(user.refreshToken);
        })
        .catch((error) => {
            const errorCode = error.code;
            const errorMessage = error.message;
            console.log(errorCode, errorMessage)
        });
    
  }

  return(
    <div className="login-wrapper">
      <h1>Please Log In</h1>
      <form onSubmit={handleSubmit}>
        <label>
          <p>Email</p>
          <input type="text" onChange={e => setEmail(e.target.value)} />
        </label>
        <label>
          <p>Password</p>
          <input type="password" onChange={e => setPassword(e.target.value)} />
        </label>
        <div>
          <button type="submit">Submit</button>
          <p className="text-sm text-white text-center">
            No account yet? {' '}
            <NavLink to="/signup">
              Sign up
            </NavLink>
          </p>
        </div>
      </form>
    </div>
  )
}
Login.propTypes = {
  setToken: PropTypes.func.isRequired
} 

App.js

import React from 'react';
import { Routes, Route, useLocation } from "react-router-dom";
import './App.css';
import Header from '../Header/Header'
import Dashboard from '../Dashboard/Dashboard';
import Preferences from '../Preferences/Preferences';
import Home from '../Home/Home';
import Login from '../Login/Login';
import Signup from '../Signup/Signup';
import useToken from './useToken';

function App() {
    const { token, setToken } = useToken();
    const location = useLocation();
    console.log(token);
	if(!token && location.pathname !== "/signup") {
        return <><Header /><Login setToken={setToken} /></>
    }
    return (
        <>
        <Header />
            <Routes>
                <Route exact path="/" element={<Home />} />
                <Route exact path='/login' element={<Login setToken={setToken} />} />
                <Route exact path='/signup' element={<Signup setToken={setToken} />} />
                <Route exact path='/dashboard' element={<Dashboard />} />
                <Route exact path='/preferences' element={<Preferences />} />
            </Routes>
        </>
    );
}

export default App;

Thanks!

[quietCoder500]

I may have already solved my own problem. According to this by adding navigate(0) after navigate("/dashboard") the browser will refresh and it did. However, this seems very inefficient. Any other suggestions? Thanks!