The Complete React Guide by Max - Section 11: Multi-Page-Feeling in a Single-Page-App: Routing

 203. Extracting Route Parameters

componentDidMount() {

    axios.get("/posts/" + this.props.match.params.id).then((response) => {

Changed from componentDidMount to componentDidMount as we are not updating this. this.props.match.params.id successfully passing route parameters and extracting them 

205. Using switch to load a single route

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

<Switch>

<Route path="/new-post" component={NewPost} />

<Route path="/:id" exact component={FullPost} />

</Switch>

<Switch> to ensure that only one route gets loaded at a time.

206. Navigating programmatically 

postSelectedHandler = (id) => {

//this.props.history.push({ pathname: "/" + id });

this.props.history.push("/" + id);

};

navigation is about a stack of pages. push() allows you to push a new page onto the stack so back and forward buttons work

207. Additional info Regarding Active link

exact is set to treat as active. 

208. Understanding Nested Routes

<Route path={this.props.match.url + "/:id"} exact component={FullPost} />

209. Creating Dynamic Nested Routes 

Important to fix match.params.id 

(this.state.loadedPost && this.state.loadedPost.id !== +this.props.match.params.id)

need to handle change in compoenetDidUpdate if component is already loaded through routing 

componentDidUpdate() {

this.loadData();

}

210. Redirecting Requests 

<Redirect from="/" to="/posts" />

211. Conditional Redirects 

let redirect = null;

if (this.state.submitted) {

redirect = <Redirect to="/posts" />;

}

212. Using the history prop to Redirect (Replace)

this.props.history.replace("/posts");

replace() or push(). new post was replaced on a stack of pages. 

213. Working with Guards

{this.state.auth ? (

<Route path="/new-post" component={NewPost} />

) : null}

214. Handling the 404 Case (Unknown Routes)

<Route render={() => <h1>Not Found</h1>} />

{/* <Redirect from="/" to="/posts" /> */}

2nd line won't work together due to from='/' as it catches all routes 

215. Loading Routes lazily 

load asychronously only when its needed

216.

217.

218.

219. Useful Links

Assignment