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
import App.scss
import Looks component
import LookExpanded component
import Auth component
[ ] Add PublicRoute and PrivateRoute code
[ ] In Class Component
within state set authed to false
[ ] In Render
set state of authed object
[ ] Return
add div with className of App
Add router div
Add switch div
[ ] In Switch div define the routes
<Public Route path path ="/auth" expact component = {Auth} authed={authed}/> <Public Route path path ="/" expact component = {Looks} authed={authed}/> <Public Route path path ="/Looks/:lookId" expact component = {LookExpanded} authed={authed}/>
<Public Route path path ="/auth" expact component = {Auth} authed={authed}/>
<Public Route path path ="/" expact component = {Looks} authed={authed}/>
<Public Route path path ="/Looks/:lookId" expact component = {LookExpanded} authed={authed}/>
[ ] Make Auth Component
import react and sass file
in class component render domstring with name of page
[ ] Make Looks Component
[ ] Make LookExpanded Component
in class component render domstring with name of page and lookId
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
import App.scss
import Looks component
import LookExpanded component
import Auth component
[ ] Add PublicRoute and PrivateRoute code
[ ] In Class Component
within state set authed to false
[ ] In Render
set state of authed object
[ ] Return
add div with className of App
Add router div
Add switch div
[ ] In Switch div define the routes
<Public Route path path ="/auth" expact component = {Auth} authed={authed}/><Public Route path path ="/" expact component = {Looks} authed={authed}/><Public Route path path ="/Looks/:lookId" expact component = {LookExpanded} authed={authed}/>[ ] Make Auth Component
import react and sass file
in class component render domstring with name of page
[ ] Make Looks Component
import react and sass file
in class component render domstring with name of page
[ ] Make LookExpanded Component
import react and sass file
in class component render domstring with name of page and lookId