RRv4 Protected Routes

App.js

import React from 'react';
import ProjectList from './projects/ProjectList';
import { Route, Switch, Redirect } from 'react-router-dom';
import './App.css';
import Navbar from './layout/Navbar';
import Home from './Home/Home';
import Dashboard from './dashboard/Dashboard';
import Profile from './profile/Profile';
import TaskLayout from './tasks/TaskLayout';
import Four04 from './core/Four04';
import Login from './authentication/Login';

// console.log(localStorage.getItem('token'));

export const Auth = {
	isAuthenticated: false,
	authenticate(cb) {
		if (localStorage.getItem('auth') === true) {
			this.isAuthenticated = true;
		}
	},
	signout(cb) {
		this.isAuthenticated = false;
	}
};

const AuthRoute = ({ component: Component, ...rest }) => {
	<Route
		{...rest}
		render={props => {
			Auth.isAuthenticated === true ? (
				<Component {...props} />
			) : (
				<Redirect
					to={{
						pathname: '/login',
						state: { from: props.location }
					}}
				/>
			);
		}}
	/>;
};

class App extends Component {
	title = 'Simple Project Manager';

	profile = {
		name: 'James Hansen',
		bio: 'Great great cat'
	};

	render() {
		return (
			<main className="container pt-3">
				<Navbar title={this.title} />
				<Switch>
					<Route path="/" exact component={Home} />
					<Route path="/login" exact component={Login} />

					<Route path="/dashboard" component={Dashboard} />
					<Route
						path="/profile"
						exact
						render={() => {
							return <Profile profile={this.profile} />;
						}}
					/>
					<Route path="/tasks" component={TaskLayout} />

					<AuthRoute path="/projects" component={ProjectList} />
					<Route component={Four04} />
				</Switch>
			</main>
		);
	}
}

export default App;

Login.js

import React, { Component } from 'react';
import axios from 'axios';
import { Redirect } from 'react-router-dom';
import { Auth } from '../App';

class Login extends Component {
	state = {
		emai: '',
		password: '',
		redirectToReferrer: false
	};

	_onChangeEmail = e => {
		this.setState({
			email: e.target.value
		});
	};

	_onChangePassword = e => {
		this.setState({
			password: e.target.value
		});
	};

	_onSubmit = async e => {
		e.preventDefault();
		const formData = {
			email: this.state.email,
			password: this.state.password
		};
		await axios.post('http://localhost:3001/api/login', formData).then(res => {
			console.log(res.data);
			const token = res.data.token;
			const auth = res.data.auth;
			localStorage.setItem('token', token);
			localStorage.setItem('auth', auth);
		});

		this.setState({
			emai: '',
			password: ''
		});
	};

	login = () => {
		Auth.authenticate(() => {
			this.setState(() => ({
				redirectToReferrer: true
			}));
		});
	};

	render() {
		const { from } = this.props.location.state || { from: { pathname: '/' } };
		const { redirectToReferrer } = this.state;

		if (redirectToReferrer === true) {
			<Redirect to={from} />;
		}

		return (
			<div className="col-8 pt-2">
				<form onSubmit={this._onSubmit}>
					<div className="form-group">
						<label>Enter Email:</label>
						<input
							type="email"
							value={this.state.email}
							onChange={this._onChangeEmail}
							className="form-control"
						/>
					</div>
					<div className="form-group">
						<label>Enter Password:</label>
						<input
							type="password"
							value={this.state.password}
							onChange={this._onChangePassword}
							className="form-control"
						/>
					</div>
					<br />
					<button type="submit" className="btn btn-success">
						Submit
					</button>
				</form>
			</div>
		);
	}
}

export default Login;

This is the weird error:

AuthRoute(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

I have searched Stack Over Flow but nothing....