blank page error

app.js(container file)

import React, { Component } from 'react';
import { createMuiTheme, MuiThemeProvider } from 'material-ui/styles';
import { Redirect, Route, Switch, withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import MainApp from '../app/index';
import 'react-big-calendar/lib/less/styles.less';
import 'styles/bootstrap.scss';
import 'styles/app.scss';
import indigoTheme from './themes/indigoTheme';
import cyanTheme from './themes/cyanTheme';
import orangeTheme from './themes/orangeTheme';
import amberTheme from './themes/amberTheme';
import pinkTheme from './themes/pinkTheme';
import blueTheme from './themes/blueTheme';
import purpleTheme from './themes/purpleTheme';
import greenTheme from './themes/greenTheme';
import {
	AMBER,
	BLUE,
	CYAN,
	DARK_AMBER,
	DARK_BLUE,
	DARK_CYAN,
	DARK_DEEP_ORANGE,
	DARK_DEEP_PURPLE,
	DARK_GREEN,
	DARK_INDIGO,
	DARK_PINK,
	DEEP_ORANGE,
	DEEP_PURPLE,
	GREEN,
	INDIGO,
	PINK
} from 'constants/Constant';
import Page404 from '../app/routes/extraPages/routes/404';
import LoginMember from '../containers/login/loginMember';
import Snackbar from 'material-ui/Snackbar';
import Button from 'material-ui/Button';
import Authentication from '../utils/authMember/authMember';
import SignUp from '../containers/signUp/signupMember';

class App extends Component {
	constructor(props) {
		super(props);
		this.state = {
			open: this.props.isError === undefined ? false : true,
			vertical: null,
			horizontal: null
		};
	}
//... other code
	render() {
		
		const { match, location, themeColor, notification } = this.props;
		const { vertical, horizontal, open } = this.state;

		let applyTheme = createMuiTheme();
		applyTheme = this.getColorTheme(themeColor, applyTheme);

		if (location.pathname === `${match.url}`) {
			return <Redirect to={`${match.url}login`} />;
		}

		console.log(match, location);
		return (
			<MuiThemeProvider theme={applyTheme}>
				<div className="app-main">
					<Snackbar
						anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
						open={notification.open}
						SnackbarContentProps={{
							'aria-describedby': 'message-id'
						}}
						message={<span id="message-id">{notification.notify}</span>}
					/>

					<Switch>
						<Route path={`${match.url}login`} exact component={LoginMember} />
						<Route path={`${match.url}registermember`} exact component={SignUp} />
						<Authentication component={AuthenticateRoute} />
						<Route component={Page404} />
					</Switch>
				</div>
			</MuiThemeProvider>
		);
	}
}

const AuthenticateRoute = ({ match, location, history }) => (
	<Switch>
		<Authentication component={MainApp} />
		<Route component={Page404} />
	</Switch>
);

const mapStateToProps = ({ settings, notification, routing }) => {
	const { themeColor, sideNavColor } = settings;

	return { themeColor, sideNavColor, notification, routing };
};

export default withRouter(connect(mapStateToProps)(App));

index.js(root file)

import React from 'react';
import ReactDOM from 'react-dom';
import history from './utils/history/history';
import { ConnectedRouter, routerMiddleware } from 'react-router-redux';
import { applyMiddleware, createStore, compose } from 'redux';
import { Provider } from 'react-redux';
import { Route, Switch, BrowserRouter, Router } from 'react-router-dom';
import rootReducer from './reducers';
import App from './containers/App';
import Page404 from 'app/routes/extraPages/routes/404';
import { log } from './middleware/log';
import axios from 'axios';
import axiosMiddleware from 'redux-axios-middleware';
import thunkMiddleware from 'redux-thunk';
import { jwt_authenticate } from './utils/jwt-auth/jwt-auth';

const middleware = routerMiddleware(history);

const createStoreWithMiddleware = applyMiddleware(middleware, log, thunkMiddleware);

const store = createStore(
	rootReducer,
	compose(createStoreWithMiddleware, window.devToolsExtension ? window.devToolsExtension() : (f) => f)
);

jwt_authenticate(store);
ReactDOM.render(
	<Provider store={store}>
		<ConnectedRouter history={history}>
			<Router history={history}>
				<App />
			</Router>
		</ConnectedRouter>
	</Provider>,
	document.getElementById('app-site')
);

MainApp.js

import React from 'react';
import { Route, withRouter, Switch, Router } from 'react-router-dom';
import { connect } from 'react-redux';
import 'jquery-slimscroll/jquery.slimscroll.min';

import { toggleCollapsedNav } from '../actions/Setting';

import Header from 'components/Header/index';
import Sidebar from 'containers/SideNav/index';
import Footer from 'components/Footer';
import Dashboard from './routes/dashboard';
import Components from './routes/components';
import Icons from './routes/icons/index';

import AppModule from './routes/appModule';

import { COLLAPSED_DRAWER, FIXED_DRAWER } from 'constants/ActionTypes';
import ColorOption from 'containers/Customizer/ColorOption';
import Page404 from '../app/routes/extraPages/routes/404';
import Predictions from '../containers/prediction/prediction';
import Groups from '../containers/groups/groups';
import LeadersBoard from '../containers/leadersboard/leadersboard';
import Submissions from '../containers/allowedSubmission/submission';
import CurrentSubmissions from '../containers/currentSubmission/currentSubmission';
import TournamentSubmissions from '../containers/tournamentSubmission/index';
import YourPerformance from '../containers/charts/yourPerformance/index';
import InviteMembers from '../containers/inviteMembers/index';
import TeamAndPlayers from '../containers/teams&players/index';

class MainApp extends React.Component {
	onToggleCollapsedNav = (e) => {
		const val = !this.props.navCollapsed;
		this.props.toggleCollapsedNav(val);
	};
	render() {
		const { match, drawerType, location } = this.props;
		const drawerStyle = drawerType.includes(FIXED_DRAWER)
			? 'fixed-drawer'
			: drawerType.includes(COLLAPSED_DRAWER) ? 'collapsible-drawer' : 'mini-drawer';

		return (
			<div className={`app-container ${drawerStyle}`}>
				<Sidebar onToggleCollapsedNav={this.onToggleCollapsedNav.bind(this)} />
				<div className="app-main-container">
					<Header drawerType={drawerType} onToggleCollapsedNav={this.onToggleCollapsedNav.bind(this)} />
					<main className="app-main-content-wrapper">
						<div className="app-main-content">
							<div className="app-wrapper">
								<Route component={RouteApp} match={match} />
							</div>
						</div>
					</main>
					<Footer />
				</div>
			</div>
		);
	}
}

const RouteApp = ({ match }) => (
	<div>

		<Switch>
			<Route path={`${match.url}home`} exact component={Dashboard} />
			<Route path={`${match.url}predictions`} exact component={Predictions} />
			<Route path={`${match.url}groups`} exact component={Groups} />
			<Route path={`${match.url}leaderboard`} exact component={LeadersBoard} />
			<Route path={`${match.url}submissions`} exact component={Submissions} />
			<Route path={`${match.url}current-submissions`} exact component={CurrentSubmissions} />
			<Route exact path={`${match.url}tournament-predictions`} component={TournamentSubmissions} />
			<Route path={`${match.url}your-performance`} exact component={YourPerformance} />
			<Route path={`${match.url}invite-members/:groupID`} exact component={InviteMembers} />
			<Route path={`${match.url}team-and-players`} exact component={TeamAndPlayers} />
			<Route component={Page404} />
		</Switch>
	</div>
);

const mapStateToProps = ({ settings }) => {
	const { navCollapsed, drawerType } = settings;
	return { navCollapsed, drawerType };
};
export default withRouter(connect(mapStateToProps, { toggleCollapsedNav })(MainApp));

public.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="keywords"
          content="Responsive, HTML5, admin theme, business, professional, React, web design, CSS3, sass">
    <title>StumpGuru</title>
    <link rel="icon" type="image/x-icon" href="favicon.ico"/>
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700,900" rel="stylesheet">
    <link rel="stylesheet" href="vendors/material-design-iconic-font/css/material-design-iconic-font.min.css">

    <link rel="stylesheet" href="vendors/weather-icons/css/weather-icons.min.css">
    <link rel="stylesheet" type="text/css" href="vendors/flag/sprite-flags-32x32.css"/>
    <link rel="stylesheet" href="vendors/animate.css">
    <link rel="stylesheet" href="vendors/loader.css">
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.26.0/polyfill.min.js"></script> -->
    <script src="https://maps.googleapis.com/maps/api/js?v=3.28&libraries=places,geometry,drawing&key=AIzaSyBE8Qtppnww7z53gFZd9_Rbef1VfA4EJfw"></script>
</head>

<body id="body">
<div id="app-site">
    <div class="loader">
        <svg class="circular" viewBox="25 25 50 50">
            <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
        </svg>
    </div>
</div>
<script src="assets/app.js"></script>
</body>
</html>