Why my route go to /events every time I reload page?

1

When browser reload, it should reload the current page.
But for me, when I reload I will go to /logout then /events every time.
Please help to fix this.

My codes are below:

App.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import { Grid } from 'react-bootstrap';
import { Meteor } from 'meteor/meteor';
import { createContainer } from 'meteor/react-meteor-data';
import { Roles } from 'meteor/alanning:roles';
import Navigation from '../components/Navigation';
import Authenticated from '../components/Authenticated';
import Public from '../components/Public';
import Index from './pages/Index';

import DSEvents from './pages/Events';
import NewEvent from './pages/NewEvent';
import EditEvent from './pages/EditEvent';

import DSRegisters from './pages/Registers';
import NewRegister from './pages/NewRegister';
import EditRegister from './pages/EditRegister';
import Upload from './pages/Upload';
import UploadProvince from './pages/UploadProvince';

import Reports from './pages/Reports';
import Ariya from './pages/Ariya';
import Putuchon from './pages/Putuchon';
import Sodaban from './pages/Sodaban';
import Sakatakameemak from './pages/Sakatakameemak';
import Sakatakameepon from './pages/Sakatakameepon';
import Anakameemak from './pages/Anakameemak';
import SummaryReport from './pages/SummaryReport';

import Signup from './pages/Signup';
import Login from './pages/Login';
import Logout from './pages/Logout';
import NotFound from './pages/NotFound';

import 'bootstrap/dist/css/bootstrap.min.css';

const App = props => (
	<Router>
		<div className="App">
			<Navigation {...props} />
				<Grid fluid={true}>
					<Switch>
						<Route exact name="index" path="/" component={Index} />
						
						<Authenticated exact path="/events" component={DSEvents} {...props} />
						<Authenticated exact path="/events/new" component={NewEvent} {...props} />
						<Authenticated exact path="/events/:_evntid/edit" component={EditEvent} {...props} />
						<Authenticated exact path="/events/:_evntid/registers" component={DSRegisters} {...props} />

						<Authenticated exact path="/events/:_evntid/registers/new" component={NewRegister} {...props} />
						<Authenticated exact path="/events/:_evntid/registers/:_regid/edit" component={EditRegister} {...props} />
						<Authenticated exact path="/events/:_evntid/registers/upload" component={Upload} {...props} />
												
						<Authenticated exact path="/reports" component={Reports} {...props} />
						<Authenticated exact path="/reports/ariya/:_evntid" component={Ariya} {...props} />
						<Authenticated exact path="/reports/putuchon/:_evntid" component={Putuchon} {...props} />
						<Authenticated exact path="/reports/sodaban/:_evntid" component={Sodaban} {...props} />
						<Authenticated exact path="/reports/sakatakameemak/:_evntid" component={Sakatakameemak} {...props} />
						<Authenticated exact path="/reports/sakatakameepon/:_evntid" component={Sakatakameepon} {...props} />
						<Authenticated exact path="/reports/anakameemak/:_evntid" component={Anakameemak} {...props} />
						<Authenticated exact path="/reports/summaryreport/:_evntid" component={SummaryReport} {...props} />

						<Public path="/signup" component={Signup} {...props} />
						<Public path="/login" component={Login} {...props} />
						<Public path="/logout" component={Logout} {...props} />
						<Route component={NotFound} />
					</Switch>
				</Grid>
			</div>
	</Router>
);

App.propTypes = {
	userId: PropTypes.string,
};

const getUserName = name => ({
	string: name,
	object: `${name.username}`,
}[typeof name]);

export default createContainer(() => {
	const loggingIn = Meteor.loggingIn();
	const user = Meteor.user();
	const userId = Meteor.userId();
	const name = user && user.username && getUserName(user);
	const emailAddress = user && user.emails && user.emails[0].address;
	
	return {
		loggingIn,
		authenticated: !loggingIn && !!userId,
		name: name || emailAddress,
		roles: Roles.getRolesForUser(userId),
		userId,
	};
}, App);

Authenticated.js

import React from 'react';
import PropTypes from 'prop-types';
import { Route, Redirect } from 'react-router-dom';

const Authenticated = ({ loggingIn, authenticated, component, ...rest }) => (
	<Route
		{...rest}
		render={props => (
			authenticated ?
			(React.createElement(component, { ...props, loggingIn, authenticated })) :
			(<Redirect to="/logout" />)
		)}
	/>
);

Authenticated.propTypes = {
	loggingIn: PropTypes.bool.isRequired,
	authenticated: PropTypes.bool.isRequired,
	component: PropTypes.func.isRequired,
};

export default Authenticated;

Public.js


import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Route, Redirect } from 'react-router-dom';

const Public = ({ loggingIn, authenticated, component, ...rest, match, history }) => (
	<Route
		{...rest}
			render={props => (
				!authenticated ?
				(React.createElement(component, { ...props, loggingIn, authenticated })) :
				(<Redirect to="/events" />)
		)}
	/>
);

Public.propTypes = {
	loggingIn: PropTypes.bool.isRequired,
	authenticated: PropTypes.bool.isRequired,
	component: PropTypes.func.isRequired,
	history: PropTypes.object,
	match: PropTypes.object,
};

export default Public;