Reactjs 从app.js导航，这是在BrowserRouter包装之外

App.js

import React from "react";
import { createRoot } from "react-dom/client";
import { Provider } from "react-redux";
import configureStore from "./store/configureStore";
import { startSetExpenses } from "./actions/expenses";
import 'normalize.css/normalize.css';
import './styles/styles.scss';
import AppRouter from "./routers/AppRouter";
import 'react-dates/lib/css/_datepicker.css';
import { auth } from './firebase/firebase';
import { onAuthStateChanged } from "firebase/auth";
import { useNavigate } from "react-router-dom";

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

const navigate = useNavigate();

const store = configureStore();

const jsx = (
    <Provider store={store}>
        <AppRouter />
    </Provider>
);

const loadingComponent = <div><p>Loading...</p></div>;

root.render(loadingComponent);

store.dispatch(startSetExpenses())
.then(() => {
    root.render(jsx);
})
.catch((error) => {
    console.error("Error fetching expenses:", error);
});

onAuthStateChanged(auth, (user) => {
    if(user){
        console.log("LoggedIN");
        navigate("/dashboard");
    }else{
        console.log("LoggedOUT");
        navigate("/");
    }
})

AppRouter.js:

import React from 'react';
import LoginPage from '../components/LoginPage';
import Header from '../components/Header';
import NotFound from '../components/NotFound';
import EditExpense from '../components/EditExpense';
import AddExpense from '../components/AddExpense';
import ExpenseDashboardPage from '../components/ExpenseDashboard';
import HelpPage from '../components/HelpPage';
import { Routes, Route, BrowserRouter } from 'react-router-dom';


const AppRouter = () => (
    <BrowserRouter >
            <Header/>
            <Routes >
                <Route path="/" element={<LoginPage />} />
                <Route path="/dashboard" element={<ExpenseDashboardPage />} />
                <Route path="/create" element={<AddExpense />} />
                <Route path="/edit/:id" element={<EditExpense />} />
                <Route path="/help" element={<HelpPage />} />
                <Route path="*" element={<NotFound />} /> 
            </Routes>
    </BrowserRouter>
);

export default AppRouter;

store.dispatch(startSetExpenses())用于从firebase获取初始数据.直到它得到解决，我在屏幕上呈现loadingComponent. 我期望使用react—router—dom中的useNavigate在用户未登录时导航到"/"路径，在onAuthStateChanged中，当用户登录时导航到"/dashboard". 但它不起作用.我该如何做到这一点？