React登录表单在登录后一直显示

I'm trying to make a little project with react and graphQl. I made a login form and register form which work fine but I'm having issues after login or registration the login form keeps showing with the navigation that you can only see when logged in above it. The navigation isn't styled yet so it looks weird. So the image below is after login. enter image description here

App.js

import React, { Component } from 'react'
import ServiceList from './ServiceList'
import CreateService from './CreateService'
import Sidenav from './Sidenav'
import '../styles/App.scss'
import {
  BrowserRouter as Router,
  Route,
  Redirect,
  Switch,
  withRouter
} from 'react-router-dom'
import Login from './Login'
import { AUTH_TOKEN } from '../constants'

class App extends Component {
  render() {
    const authToken = localStorage.getItem(AUTH_TOKEN)
    const PrivateRoute = ({ component: component, ...rest }) => (
      <Route {...rest} render={(props) => (
        authToken === true
          ? <Redirect to='/' {...props} />
          : <Redirect to='/login' />
      )} />
    )
    return (
      <React.Fragment>

        <Sidenav />
        <div className="fullscreen">
          <Switch>
            <PrivateRoute exact path="/" component={ServiceList} />
            <PrivateRoute exact path="/create" component={CreateService} />
            <Route exact path="/login" component={Login} />
          </Switch>
        </div>
      </React.Fragment>
    )
  }
}


export default App

登录

import React, { Component } from 'react'
import { AUTH_TOKEN } from '../constants'
import { Mutation } from 'react-apollo'
import gql from 'graphql-tag'
import '../styles/Login.scss'

class Login extends Component {
    state = {
        login: true,// switchen between login and signup
        email: '',
        password: '',
        name: '',
    }

    render() {
        const SIGNUP_MUTATION = gql`
        mutation SignupMutation($email: String!, $password: String!, $name: String!) {
        signup(email: $email, password: $password, name: $name) {
        token
      }
    }
      `
        const LOGIN_MUTATION = gql`
        mutation LoginMutation($email: String!, $password: String!) {
        login(email: $email, password: $password) {
        token
    }
  }
      `
        const { login, email, password, name } = this.state
        return (
            <div id="login-container">

                <div id="side">
                    {/* <h4> BEES </h4>
                    <h5> You're Business Scheduler  </h5> */}
                </div>
                <div id="login">
                    <div id="login-form">
                        <div>
                            <h2 >{login ? 'Welcome' : 'Make a new account'}</h2>
                        </div>
                        <div className="fields">
                            {!login && (
                                <div className="form-group">
                                    <label>Name:</label>
                                    <input
                                        className="form-control"
                                        value={name}
                                        onChange={e => this.setState({ name: e.target.value })}
                                        type="text"
                                        placeholder="Your name"
                                    />
                                </div>
                            )}
                            <div className="form-group">
                                <label>Email:</label>
                                <input
                                    className="form-control"
                                    value={email}
                                    onChange={e => this.setState({ email: e.target.value })}
                                    type="text"
                                    placeholder="Your email address"
                                />
                            </div>
                            <div className="form-group">
                                <label>Password:</label>
                                <input
                                    className="form-control"
                                    value={password}
                                    onChange={e => this.setState({ password: e.target.value })}
                                    type="password"
                                    placeholder={login
                                        ? 'Enter password'
                                        : 'Choose a safe password'}
                                />
                            </div>

                        </div>
                        <div className="button-field">
                            <Mutation
                                mutation={login ? LOGIN_MUTATION : SIGNUP_MUTATION}
                                variables={{ email, password, name }}
                                onCompleted={data => this._confirm(data)}
                            >
                                {mutation => (
                                    <div className="button" onClick={mutation}>
                                     <p>   {login ? 'Login' : 'Sign Up'}</p>
                                    </div>
                                )}
                             </Mutation>
                            <div
                                className="change-form"
                                onClick={() => this.setState({ login: !login })}
                            >
                                {login ? "Don't have an account?" : 'Already have an account?'}
                                <span> {login ? "Sign Up" : 'Login'}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }

    _confirm = async data => {
        const { token } = this.state.login ? data.login : data.signup
        this._saveUserData(token)
        this.props.history.push('/')
    }

    _saveUserData = token => {
        localStorage.setItem(AUTH_TOKEN, token)
    }
}

export default Login

我不确定自己在做什么错

评论