为什么我无法通过谷歌的正确身份验证？

Question

所以我是新手，正在尝试通过谷歌进行身份验证。问题是，每次我尝试登录或注册谷歌身份验证时，我都会看到一个空白屏幕，控制台中有一些错误。这是我的应用程序组件，错误源自此组件。我想是基于用户位置挂钩的错误。最初，我收到一个错误，告诉我位置变量是未定义的，我通过在index.js文件中移动Router标签来解决这个问题，它起了作用。但是，现在又一次，它造成了错误。

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)

这是控制台中显示的错误图像。请引导。错误图像

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>