The Complete React Guide by Max - Section 12: Adding Routing to our Burger Project

 220. Module Introduction - just intro

221. Building the checkout container 

just create Checkout/checkoutSummary JS files 

222. Setting up Routing & Routes

<Switch>

<Route path="/checkout" component={Checkout} />

<Route path="/" exact component={BurgerBuilder} />

</Switch>

order is matter and use <Switch> shows only route

223. Navigating to the checkout page 

this.props.history.push("/checkout");

yarn add react-router-app and cover {BrowserRouter} in index.js and then work on purchaseContinueHandler(that push('/checkout'))

224. Navigating back & to next page

checkoutCancelled = () => {

this.props.history.goBack();

};

checkoutContinued = () => {

this.props.history.replace("/checkout/contact-data");

};

pass props on each buttons with those 2 functions 

225. Passing Ingredients via query params

in BurgerBuilder.js, 

const queryParams = [];

for (let i in this.state.ingredients) {

queryParams.push(

encodeURIComponent(i) +

"=" +

encodeURIComponent(this.state.ingredients[i])

);

}

const queryString = queryParams.join("&");

this.props.history.push({

pathname: "/checkout",

search: "?" + queryString,

});

in checkout.js, pass the query from location.search 

componentDidMount() {

const query = new URLSearchParams(this.props.location.search);

const ingredients = {};

for (let param of query.entries()) {

ingredients[param[0]] = +param[1]; // ['salad', '1']

}

this.setState({ ingredients: ingredients });

}

226. Navigating to the contact data component

<Route

path={this.props.match.path + "/contact-data"}

component={ContactData}

/>

call contact data component 

227. Order Submission & Passing Data Between Pages

... failed to understand this part

228. Adding an Orders Page

just create components 

229. Implementing Navigation Links

<NavLink

to={props.link}

exact={props.exact}

activeClassName={classes.active}

>

{props.children}

</NavLink>

230. Fetching orders 

componentDidMount() {

axios

.get("./orders.json")

.then((res) => {

const fetchedOrders = [];

for (let key in res.data) {

fetchedOrders.push({ ...res.data[key], id: key });

}

this.setState({ loading: false, orders: fetchedOrders });

})

.catch((err) => {

this.setState({ loading: false });

});

}

make it work with backend 

231. Outputting the orders

const ingredients = [];

for (let ingredientName in props.ingredients) {

ingredients.push({

name: ingredientName,

amount: props.ingredients[ingredientName],

});

}

const ingredientsOutput = ingredients.map((ig) => {

return (

<span

style={{

textTransform: "capitalize",

display: "inline-block",

margin: "0 8px",

border: "1px solid #ccc",

padding: "5px",

}}

key={ig.name}

>

{ig.name} ({ig.amount})

</span>

);

});