Javascript react和laravel中的登录身份验证未记录

我是react and react路由器的新手，我正在尝试借助laravel react and react路由器进行身份验证。当点击submit按钮时，当url更改时，页面将重定向到所需的目标，但似乎有错误，我无法找出。当我手动重新加载页面时，组件似乎会呈现，但当单击submit按钮/提交表单时，react会抛出以下错误

控制台中出现错误

Warning: Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state. app.js:39442:7
The above error occurred in the <LoginPage> component:
    in LoginPage (created by Route)
    in Route (created by withRouter(LoginPage))
    in withRouter(LoginPage) (created by Route)
    in Route (created by RouterComponent)
    in Switch (created by RouterComponent)
    in Router (created by BrowserRouter)
    in BrowserRouter (created by RouterComponent)
    in RouterComponent
    in Provider

Consider adding an error boundary to your tree to customize error handling behavior.
Error: LoginPage(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null. app.js:38991:15
Source map error: SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
Resource URL: http://127.0.0.1:8000/js/app.js
Source Map URL: popper.js.map[Learn More]

export function PrivateRoute ({component: Component, authed, ...rest}) {
    return (
      <Route exact
        {...rest}
        render={(props) => authed === true
          ? <Component {...props} />
          : <Redirect to={{pathname: '/admin/login', state: {from: props.location}}} />}
      />
    )
  }

警告：无法在现有状态转换期间更新（例如在“渲染”中）。渲染方法应该是道具和状态的纯函数。app.js:39442:7
组件中发生了上述错误：
在登录页面中（由路由创建）
路由中（由withRouter（登录页面）创建）
在withRouter（登录页面）中（由路由创建）
路由内（由RouterComponent创建）
in交换机（由RouterComponent创建）
路由器中（由BrowserRouter创建）
浏览器路由器中（由RouterComponent创建）
在路由器组件中
输入提供者
考虑将错误边界添加到树中以自定义错误处理行为。
错误：LoginPage（…）：渲染未返回任何内容。这通常意味着缺少返回语句。或者，要不呈现任何内容，请返回null。app.js:38991:15
源映射错误：SyntaxError:JSON.parse:JSON数据的第1行第1列出现意外字符
资源URL:http://127.0.0.1:8000/js/app.js
源地图URL:popper.js.Map[了解更多信息]

登录组件

import React, { Component } from 'react'
import '../../../public/admin/css/bootstrap.min.css';
import '../../../public/admin/css/themify-icons.css';
import '../../../public/admin/css/styles.css';
import { withRouter, Redirect } from 'react-router-dom';
class LoginPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            email: '',
            password: '',
            token: '',
            loggingIn: false,
            error: []
        }
        this.changeVal = this.changeVal.bind(this);
        this.login = this.login.bind(this);
    }
    componentDidMount() {
        this.setState({
            token: document.getElementById("csrf-token").getAttribute("content")
        })
    }
    changeVal(e) {
        this.setState({
            [e.target.name]: e.target.value
        })
    }
    login(e) {
        e.preventDefault();
        let arr = {
            email: this.state.email,
            password: this.state.password,
            token: this.state.token
        };
        let route = e.target.getAttribute('action');
        axios.post(route, arr).then(response => {
            localStorage.setItem('userId', response.data[0].id);
            localStorage.setItem('loggedIn', "true");
            this.props.history.push('/admin/dashboard');
        }).catch(error => {
            if(localStorage.getItem('userId') !== null) return localStorage.removeItem('userId');
            if(localStorage.getItem('loggedIn') !== null) return localStorage.removeItem('loggedIn');
            console.log(response.error);
        })
    }
    render() {
        if ((localStorage.getItem('loggedIn') === "true")) return this.props.history.push('/admin/dashboard');
        return (
            <div className="login-area">
                <div className="container">
                    <div className="login-box ptb--100">
                        <form method="POST" onSubmit={this.login} action="/api/login">
                            <input type="hidden" name="_token" value={this.state.token} />
                            <div className="login-form-head">
                                <h4>Sign In</h4>
                            </div>
                            <div className="login-form-body">

                                <div className="form-gp">
                                    {
                                        /*     this.props.errors.map(item => {
                                            return (
                                                <span key={item} className="text-danger d-block" role="alert">
                                                    <strong>{item}</strong>
                                                </span>
                                            )
                                        }) */
                                    }
                                </div>
                                <div className="form-gp">
                                    <input id="email" type="email" className={"form-control "} name="email" autoFocus value={this.state.email} onChange={this.changeVal} />
                                    <i className="ti-email"></i>
                                </div>

                                <div className="form-gp">
                                    <input id="password" type="password" className={"form-control"} name="password" value={this.state.password} onChange={this.changeVal} />
                                    <i className="ti-lock"></i>
                                </div>

                                <div className="form-gp">
                                    <a href="/password/reset">Forgot Password?</a>
                                </div>
                                <div className="submit-btn-area">
                                    <button id="form_submit" type="submit" >{(this.props.loggedIn) ? "Submit Form" : "Please fill form"}  <i className="ti-arrow-right"></i></button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        )
    }
}
export default (withRouter(LoginPage));

import React，{Component}来自“React”
导入“../../public/admin/css/bootstrap.min.css”；
导入“../../public/admin/css/themify icons.css”；
导入“../../public/admin/css/styles.css”；
从“react router dom”导入{withRouter，Redirect}；
类LoginPage扩展组件{
建造师（道具）{
超级（道具）；
此.state={
电子邮件：“”，
密码：“”，
令牌：“”，
登录：错误，
错误：[]
}
this.changeVal=this.changeVal.bind（this）；
this.login=this.login.bind（this）；
}
componentDidMount（）{
这是我的国家({
令牌：document.getElementById（“csrf令牌”）.getAttribute（“内容”）
})
}
changeVal（e）{
这是我的国家({
[e.target.name]：e.target.value
})
}
登录（e）{
e、 预防默认值（）；
设arr={
电子邮件：this.state.email，
密码：this.state.password，
令牌：this.state.token
};
让route=e.target.getAttribute（'action'）；
axios.post（路由，arr）。然后（响应=>{
localStorage.setItem（'userId'，response.data[0].id）；
setItem（'loggedIn'，“true”）；
this.props.history.push（'/admin/dashboard'）；
}).catch（错误=>{
if（localStorage.getItem（'userId'）！==null）返回localStorage.removietem（'userId'）；
if（localStorage.getItem（'loggedIn'）！==null）返回localStorage.removietem（'loggedIn'）；
console.log（response.error）；
})
}
render（）{
if（（localStorage.getItem（'loggedIn'）==“true”））返回此.props.history.push（'/admin/dashboard'）；
返回(
登录
{
/*this.props.errors.map（项=>{
返回(
{item}
)
}) */
}
{（this.props.loggedIn）？“提交表格”：“请填写表格”}
)
}
}
导出默认值（使用路由器（登录页面））；

路由器组件

import React,{Component} from 'react';
import IndexPage from './components/IndexPage';
import ContactPage from './components/ContactPage';
import CmsPage from './components/CmsPage';
import ErrorPage from './components/ErrorPage';
import ThanksPage from './components/ThanksPage';
import LoginPage from './components/LoginPage';
import Dashboard from './components/Dashboard';
import withRoot from './Root';
import {PrivateRoute} from './layouts/helpers';
import {BrowserRouter as Router,Route,Switch} from 'react-router-dom';
class RouterComponent extends Component{
    render(){
        return (
            <Router basename={'/'}>
                <Switch> 
                    <Route path="/" exact component={withRoot(IndexPage)} />
                    <Route path="/contact" exact component={withRoot(ContactPage)} />
                    <Route path="/thanks" exact component={withRoot(ThanksPage)} />
                    <Route path="/page/:id" exact component={withRoot(CmsPage)} />
                    <Route path="/page/:id/subpage/:subId" exact component={withRoot(CmsPage)} />
                    <Route path="/admin/login" exact component={LoginPage} />
                    <PrivateRoute authed={(localStorage.getItem('loggedIn') === "true")} path='/admin/dashboard' component={Dashboard} />
                    <Route component={ErrorPage} />
                </Switch>
            </Router>
        )
    }
}
export default RouterComponent;

import React，{Component}来自'React'；
从“/components/IndexPage”导入IndexPage；
从“./components/ContactPage”导入ContactPage；
从“./components/CmsPage”导入CmsPage；
从“./components/ErrorPage”导入ErrorPage；
从“./components/ThanksPage”导入ThanksPage；
从“./components/LoginPage”导入LoginPage；
从“./components/Dashboard”导入仪表板；
从“/Root”使用Root导入；
从“./layouts/helpers”导入{privaterout}；
从“react Router dom”导入{BrowserRouter as Router，Route，Switch}；
类RouterComponent扩展了组件{
render（）{
返回(
)
}
}
导出默认路由组件；

受保护的路由

Warning: Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state. app.js:39442:7
The above error occurred in the <LoginPage> component:
    in LoginPage (created by Route)
    in Route (created by withRouter(LoginPage))
    in withRouter(LoginPage) (created by Route)
    in Route (created by RouterComponent)
    in Switch (created by RouterComponent)
    in Router (created by BrowserRouter)
    in BrowserRouter (created by RouterComponent)
    in RouterComponent
    in Provider

Consider adding an error boundary to your tree to customize error handling behavior.
Error: LoginPage(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null. app.js:38991:15
Source map error: SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
Resource URL: http://127.0.0.1:8000/js/app.js
Source Map URL: popper.js.map[Learn More]

export function PrivateRoute ({component: Component, authed, ...rest}) {
    return (
      <Route exact
        {...rest}
        render={(props) => authed === true
          ? <Component {...props} />
          : <Redirect to={{pathname: '/admin/login', state: {from: props.location}}} />}
      />
    )
  }

导出函数privaterout（{component:component，authed，…rest}）{
返回(
授权===true
? 
: }
/>
)
}

仪表板或登录重定向的位置

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
class Dashboard extends Component {
  constructor(props){
    super(props);
    this.state = {
      token:'',
      userId: localStorage.getItem('userId'),
      loggedIn: (localStorage.getItem('loggedIn') === "true")
    }
    this.logout = this.logout.bind(this);
  }
  componentDidMount() {
      this.setState({
          token: document.getElementById("csrf-token").getAttribute("content")
      })
  }
  logout(e) {
    e.preventDefault();
    let route = e.target.getAttribute("action");
    let arr = {
      token : this.state.token
    }
    axios.post(route,arr).then(response => {
      localStorage.removeItem('loggedIn');
      localStorage.removeItem('userId');
      this.props.history.push('/admin/login');
    }).catch(error => {
      console.log(error);
    })
    console.log("route ->" + route);
  }
  render() {
    return (
      <>
        {localStorage.getItem('userId')}
        <form action="/api/logout" className="d-inline-block" method="post" onSubmit={this.logout}>
          <input type="hidden" name="_token" value={this.state.token} />
          <button type="submit" className="btn btn-danger btn-sm">Logout</button>
        </form>
      </>
    )
  }
}
export default (withRouter(Dashboard));

    useEffect(()=>{
if(localStorage.getItem('loggedIn')&&localStorage.getItem('loggedIn')==='true){
props.history.push('/admin/dashboard')
}
})