Closed CharityBunyon closed 4 years ago
WHEN the page loads the user should be on the Auth page AND when the user types in the paths manually they'll be able to check to see if the routing is working
[ ] Install React-router-dom (npm install react-router-dom)
[ ] src/App/App.js
import React from react
import {BrowserRouter as Router, Route, Redirect, Switch} from router dom
[ ] Add Route and PrivateRoute code
[ ] In Navbar Class Component
within state set authed to false
[ ] In App.js define routes
<Route path path ="/auth" expact component = {Auth} authed={authed}/> <Route path path ="/" expact component = {Home} authed={authed}/> <Private Route path path ="/log" expact component = {Log} authed={authed}/> <Private Route path path ="/dashboard" expact component = {Dashboard} authed={authed}/> <Private Route path path ="/exercises" expact component = {Exercises} authed={authed}/> <Private Route path path ="/recipes" expact component = {Recipes} authed={authed}/>
<Route path path ="/auth" expact component = {Auth} authed={authed}/>
<Route path path ="/" expact component = {Home} authed={authed}/>
<Private Route path path ="/log" expact component = {Log} authed={authed}/>
<Private Route path path ="/dashboard" expact component = {Dashboard} authed={authed}/>
<Private Route path path ="/exercises" expact component = {Exercises} authed={authed}/>
<Private Route path path ="/recipes" expact component = {Recipes} authed={authed}/>
Story
AC
WHEN the page loads the user should be on the Auth page AND when the user types in the paths manually they'll be able to check to see if the routing is working
Dev Notes
[ ] Install React-router-dom (npm install react-router-dom)
[ ] src/App/App.js
import React from react
import {BrowserRouter as Router, Route, Redirect, Switch} from router dom
[ ] Add Route and PrivateRoute code
[ ] In Navbar Class Component
within state set authed to false
[ ] In App.js define routes
<Route path path ="/auth" expact component = {Auth} authed={authed}/><Route path path ="/" expact component = {Home} authed={authed}/><Private Route path path ="/log" expact component = {Log} authed={authed}/><Private Route path path ="/dashboard" expact component = {Dashboard} authed={authed}/><Private Route path path ="/exercises" expact component = {Exercises} authed={authed}/><Private Route path path ="/recipes" expact component = {Recipes} authed={authed}/>