为什么我无法正确通过 Google 进行身份验证？

Question

所以我是新手，我正在尝试通过 Google 进行身份验证。问题是每次我尝试使用 Google 身份验证登录或注册时，我都会在控制台中看到一个空白屏幕，其中包含一些错误。 这是我的应用程序组件，错误来自哪里。我猜是基于用户位置挂钩的错误。最初，我收到一个错误，告诉我位置变量未定义，我通过在 index.js 文件中移动路由器标签来修复它并且它工作。但是，现在又是它导致的错误。

import { BrowserRouter as Router, Route,Redirect, Switch } from "react-router-dom";
import './App.css';
import {SignUp,Login,Sidebar,Navbar,Profile} from './components'
import {ResetPassword} from './pages'
import {ResetPasswordConfirm} from './pages'
import {Activate} from './pages'
import {PrivateRoute} from './components'
import {load_user,checkAuthenticated,logout,googleAuthenticate} from './actions/auth'
import {useEffect,useState} from 'react'
import { connect } from 'react-redux';
import {Upload,ClassDiagram,Table,Buttons,Saved} from './pages'
import axios from 'axios'
import {useLocation} from 'react-router-dom'
import queryString from 'query-string'
function App({checkAuthenticated,
  load_user,isAuthenticated,
  userdata}) {

    let location = useLocation()
    
    const [darkmode,setDarkmode] = useState(false);
    const [sidebar,setSidebar] = useState(true)
    
  
    const showSidebar = ()=> {setSidebar(!sidebar)}
    

    const applyDark = () => {

      let url = `http://127.0.0.1:8000/profile/update/${userdata?.id}/`;

        async function setDarkTheme(){
        
          const resp = await axios.patch(url,{"darktheme":!darkmode})
          setDarkmode(!darkmode)
             
      } 
      
      setDarkTheme()
      
    }

    
  
  useEffect(() => {
      const values = queryString.parse(location.search)
      const state = values.state? values.state : null
      const code = values.code? values.code : null
      console.log(state)
      console.log(code)
      if(state && code){
        googleAuthenticate(state,code)
      }
      else{
        checkAuthenticated();
        load_user();
      }

     
      
  }, [location]);

  useEffect(()=>{
    if (isAuthenticated){
      let url = `http://127.0.0.1:8000/profile/get/${userdata?.id}/`;

      async function getDarkTheme(){
      
        const resp = await axios.get(url)
        setDarkmode(resp.data.darktheme)           
    }  

        getDarkTheme()
    }
  })

  
  
  return (
    
    
<div>
    {isAuthenticated && 

    <div className={darkmode?"darkmode":"light"}>
        {userdata?
          <div>
        <Navbar showSidebar={showSidebar}
        fullname={userdata.fullname} 
        darkmode={darkmode}/>

        <div className="dashboard">

            <Sidebar sidebar={sidebar}
            fullname={userdata.fullname}
            setDarkmode={applyDark}/>
            <Switch>
            <Route exact path='/profile' 
            component={() => <Profile darkmode={darkmode} userdata={userdata}/> } />

            <Route exact path='/scanner' component={Upload} />
            <Route exact path='/buttons' component={Buttons} />

            <Route exact path='/cd' 
            component={() => <ClassDiagram darkmode={darkmode} id={userdata.id}/> } />

            <Route exact path='/sv'
            component={()=><Saved id={userdata.id}/>} />

            <Route exact path='/table' 
            component={()=><Table darkmode={darkmode} id={userdata.id}/>} />
            
            <Route exact path='/buttons' component={Buttons} />
          </Switch>
      </div>
      </div>:<h1>Loading</h1>}
      </div>
     }

      <Switch>
        <Route exact path='/signup' component={SignUp} />
        <Route exact path='/login' component={Login} />
        <Route exact path='/reset-password' component={ResetPassword} />
        <Route exact path='/password/reset/confirm/:uid/:token' component={ResetPasswordConfirm} />
        <Route exact path='/activate/:uid/:token' component={Activate} />
      </Switch>
      
      
    
      </div>
   
  );
}


const mapStateToProps = state => ({
  isAuthenticated: state.auth.isAuthenticated,
  userdata: state.auth.user
});

export default connect(mapStateToProps, {checkAuthenticated,load_user,googleAuthenticate})(App)

这是控制台中显示的错误图像。请指导。 The Error Image

index.js 文件的代码。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {DataProvider} from './DataContext'
import {Provider} from 'react-redux'
import { BrowserRouter} from "react-router-dom";
import { PersistGate } from 'redux-persist/integration/react'
import configureStore from './store';
const { persistor, store } = configureStore()

ReactDOM.render(
  
  <React.StrictMode>
    <Provider store={store}>
    <PersistGate persistor={persistor}>
    <DataProvider>
      <BrowserRouter>
    <App />
    </BrowserRouter>
    </DataProvider>
    </PersistGate>
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

Answer 1

这里缺少一些东西来调试您的代码。 首先，请确保将路由器包裹在 App.js 周围，如下所示：

 import { BrowserRouter } from "react-router-dom";
 
   <BrowserRouter>
         <App />
     </BrowserRouter>