这是我的代码：

// Components 
import Dashboard from './Dashboard'; 
import Login from './Authentication/Login'; 
import { Route } from "react-router-dom";

// Redux import { useSelector, useDispatch } from 'react-redux'; 
import { selectUser } from '../userSlice';

function Authentication() {

    // Redux to manage user state
    var user = useSelector(selectUser); // Use the userReducer called "user"

    return (
    <>
        {user ? <Dashboard /> : <Login />}
    </>
    )
}

export default Authentication;

这是我的店，我的地盘
第一次
然而，我不确定这是否是最好的方法，我想确保如果用户状态为空，那么我们进入登录，否则我们进入 Jmeter 板。
这是我的登录代码：

// Imports
import react from 'react'
import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import axios from 'axios';
import jwt_decode from "jwt-decode";

// Redux
import { useSelector, useDispatch } from 'react-redux';
import { login, selectUser } from '../../userSlice';

// Styling
import Container from '@mui/material/Container';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';

// Google O-Auth
import { GoogleLogin } from 'react-google-login';
import Signup from './Signup';
const clientID = "743792005372-l001hnasupsvimqur3hq32pe8ngje3rr.apps.googleusercontent.com"

function Login() {

    // Step 1: Add O-Auth functionality 
    // Step 2: Add onClick functionality after submission 
    // Step 3: Add useNavigate hook from React Router to redirect to user-specific Dashboard

    // Redux to manage user state
    const user = useSelector(state => state.user); // Use the userReducer called "user"
    const dispatch = useDispatch(); // Use the dispatch function to update the userReducer

    // const [ user, setUser ] = useState({});
    const navigate = useNavigate();

    function handleCallbackResponse(response) {
        var userObject = jwt_decode(response.credential);
        console.log("User logged in successfully!");
        console.log(userObject);

        // Use Redux to set state of user
        dispatch(login(userObject)); // Here, login is the action and userObject is the action.payload 

        navigate('/dashboard');
    }

    useEffect(() => {
        /*global google*/
        google.accounts.id.initialize({
            client_id: clientID,
            callback: handleCallbackResponse
        });

        google.accounts.id.renderButton(
            document.getElementById('signInButton'),
            { theme: 'outline', size: 'large', type: 'standard' }
       );

    }, []);


    return (
        <Container align="center" sx={{ mt: '2rem' }}>
            <Typography variant="h3">Welcome to</Typography>
            <Typography variant="h1">ReadHub</Typography>

            <Box id="signInButton" sx={{ m: 4 }}>
                {/* <GoogleLogin
                    clientId={clientID}
                    buttonText={"Login"}
                    onSuccess={onSuccess}
                    onFailure={onFailure}
                    cookiePolicy={'single_host_origin'}
                    isSignedIn={true}
                /> */}
            </Box>

        </Container>
    );
}
export default Login;

现在，问题是：在重新加载，并前往根路由（“/”），这是认证组件正在呈现，所需的行为是-如果登录，然后去重定向到 Jmeter 板。然而，我只是得到一个白色的屏幕与模糊的错误“登录组件中的错误”。