src/components/app.js
// returning an array of pages only accessible by logged in users(protecting the routes!(Route Guard))
returning an array of pages only accessible by logged in users(protecting the routes!(Route Guard))
returning an array of pages only accessible by logged in users ( protecting the routes! ( Route Guard ))
render() {
		return (
			<div className="container">
				<Router>
					<div>
						<NavigationContainer
							loggedInStatus={this.state.loggedInStatus}
							handleSuccessfulLogout={this.handleSuccessfulLogout}
						/>
						<Switch>
							<Route exact path="/" component={Home} />
							<Route
								path="/auth"
								render={(props) => (
									<Auth
										{...props}
										handleSuccessfulLogin={this.handleSuccessfulLogin}
										handleUnsuccessfulLogin={this.handleUnsuccessfulLogin}
									/>
								)}
							/>
							<Route path="/about-me" component={About} />
							<Route path="/contact" component={Contact} />
							<Route
								path="/blog"
								render={(props) => <Blog {...props} loggedInStatus={this.state.loggedInStatus} />}
							/>
							<Route
								path="/b/:slug"
								render={(props) => <BlogDetail {...props} loggedInStatus={this.state.loggedInStatus} />}
							/>
							{this.state.loggedInStatus === "LOGGED_IN" ? this.authorizedPages() : null}
							<Route exact path="/portfolio/:slug" component={PortfolioDetail} />
							<Route component={NoMatch} />
							{}
						</Switch>
					</div>
				</Router>
			</div>
		);
	}
render ( ) { return ( < div className = "container" > < Router > < div > < NavigationContainer loggedInStatus = { this . state . loggedInStatus } handleSuccessfulLogout = { this . handleSuccessfulLogout } / > < Switch > < Route exact path = "/" component = { Home } / > < Route path = "/auth" render = { ( props ) => ( < Auth { ... props } handleSuccessfulLogin = { this . handleSuccessfulLogin } handleUnsuccessfulLogin = { this . handleUnsuccessfulLogin } / > ) } / > < Route path = "/about-me" component = { About } / > < Route path = "/contact" component = { Contact } / > < Route path = "/blog" render = { ( props ) => < Blog { ... props } loggedInStatus = { this . state . loggedInStatus } / > } / > < Route path = "/b/:slug" render = { ( props ) => < BlogDetail { ... props } loggedInStatus = { this . state . loggedInStatus } / > } / > { this . state . loggedInStatus === "LOGGED_IN" ? this . authorizedPages ( ) : null } < Route exact path = "/portfolio/:slug" component = { PortfolioDetail } / > < Route component = { NoMatch } / > { } < / Switch > < / div > < / Router > < / div > ) ; }
returning an array of pages only accessible by logged in users(protecting the routes!
returning an array of pages only accessible by logged in users ( protecting the routes!
// this Logout prop (up above) is called to update the loggedInStatus back to the initial state of NOT_LOGGED_IN /* these are routes for each component link on the page */