Learn about handling the browser's navigation buttons using the history popstate event and how to deal with the different states that it might have.
- [Teacher] Let's handle the browser navigation.…Our application worked very well with…our own links, but when we start hitting the…Back and Forward button, it doesn't work very well.…The only thing that changes is the URL itself.…The content does not change.…This is because we're not handling the popstate…event in the history API, so let's fix that.…The syntax is window.onpopstate, and you give it a function.…I'm going to do that inside componentDidMount…to make sure that we have DOM to work with.…
So this is a function, and this function will…give me access to the popstate event in here.…Let's just console.log that event to take a look at it.…So now let's refresh, go to one…of the contests, and then go back.…And you'll see that in the console, I have…a popstate event, and what's important about…this event is that we have the state here.…And the state here is null, let's do one more navigation.…Let's navigate forward, and I have another popstate event,…and now the state here does have a currentContestId.…
So when I'm navigating back and forward here, I have access…
- Configuring webpack and Babel
- Working with native Node modules
- Creating an Express server
- Working with React components and JSX
- Loading and working with test mock data
- Fetching data from a remote API
- Working with data in MongoDB
- Isomorphic rendering on the server
- Front-end routing and back-end routing
Skill Level Intermediate
Building a Website with Node.js and Express.jswith Ray Villalobos3h 16m Intermediate
MEAN Stack and MongoDB Development Techniqueswith Alexander Zanfir1h 48m Intermediate
Up and Running with ECMAScript 6with Eve Porcello1h 18m Beginner
1. Getting Started
2. Node as a Web Server
3. React Basics
4. Working with Data
5. Rendering on the Server
Fix the checksum problem6m 11s
6. Routing on Client and Server
7. Working with MongoDB
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.