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。

我原本期望在onAuthStateChanged中，当用户未登录时使用useNavigate跳转到"/"路径，用户登录时跳转到"/dashboard"路径，但这个功能并没有生效。请问我该如何实现这个需求？

备注：内容来源于stack exchange，提问作者Mohit