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
Become a member
to unlock all features

Level Up!

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


    Add Navigation Elements in React to a PWA in Standalone Mode

    Chris AchardChris Achard

    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.



    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




    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.