Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Add Navigation Elements in React to a PWA in Standalone Mode

    Chris AchardChris Achard
    reactReact
    16.6.3-16.8.6
    javascriptJavaScript

    When a PWA operates in standalone mode on a mobile device, it doesn't have the usual back button (and other browser controls) that it would on the web. Because of that, it's very important that you add your own navigation controls (like back buttons) to your app, so that your user can get to all parts of your app without relying on any browser controls.

    We'll look at the new Profile page, and add a back button that allows the user to go back to the home page.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: Add React Router with yarn add React Router DOM. I've exported a new app that has the list at the route URL and a profile page at /profile. Both of those components are in the same file, App.js. In the list header, there's a link to the profile page, which is just a simple page that displays a user profile icon.

    When we run that, we can see the profile link in the header. Clicking the link takes us to the next page. In the browser, users will know to hit the back button to go back to the home page. If they've just installed this PWA on a mobile device and it's running in standalone mode, then there's no typical web controls. There's no forward or backward. Let's make sure to add a back button to the profile page.

    In App.js, import the back button PNG. Then we can switch the logo and the header to a back button. Now when we run in standalone mode, the user knows they can hit the back button to go to the home page. When you have a PWA that can be installed on mobile devices, always make sure you add navigation elements to allow access to all parts of your app without using the web browser controls.