2.E.5: Instagram Routes
- 1.Understand how to use React Router to build React apps with multiple URL paths
- 2.Understand how to split component logic to effectively have multiple pages served by the same React app
- 3.Understand how to refactor class components to be functional components with React Hooks
- 4.Understand how to deploy an app with Firebase Hosting
- 5.Know how to read documentation to apply a new technology
We will build on previous Instagram exercises to incorporate React Router and create standalone pages for each post with relevant URLs.
- 3.Practice safe sharing, create implement your .env so that you do not share your Firebase credentials online when pushing to GitHub.
We will deploy on Firebase Hosting instead of GitHub Pages
After incorporating React Router's
BrowserRouterwe will be unable to deploy our React apps to GitHub pages anymore. The linked article suggests
HashRouterbut having a
#in the middle of our URL isn't the most conventional. We will still use
BrowserRouterbut deployed to Firebase Hosting with relevant configuration to make it work.
In Instagram Auth we created an
AuthFormcomponent that renders instead of the
NewsFeedcomponent when our user wants to sign in. We will now create separate routes for
/) components to make it easier for users to navigate to the auth form and news feed respectively. Consider referring back to the React Router Tutorial and using the React Router Quick Start page as reference while implementing.
Now that we will use links and routes to navigate between our auth form and news feed, we no longer need
shouldRenderAuthFormstate and the
toggleAuthFormmethod to determine whether to render the auth form. We can remove all mentions of
App, and update
toggleAuthFormusage to either a React Router
/after auth form submission.
You may remember that we cannot use React Hooks in class components. There is no need to rewrite all of our components to be functional components, but we will need to rewrite ones such as
AuthFormthat need the React Router
useNavigatehook. Revise official Hooks docs for a refresher.
Clicking on posts in the news feed navigates to a standalone page for the clicked post. The standalone page should have a URL that uniquely identifies that post, and a back button to get back to the news feed. Create a new component in a new file for pages for individual posts. We may find Reading URL Params in React Router helpful for creating and using a relevant URL for each post.
Re-create our chat page from Instagram Chat as a separate component. Add a navigation bar to the app and allow users to toggle between news feed and chat pages via navigation links. Toggling between features updates the app URL for the relevant feature.
Submit a pull request to the
mainbranch of Rocket's Instagram repo and share your PR link in your section Slack channel.
If you would like to deploy your app to the internet, follow Create React App Firebase deployment instructions here. When prompted, Answer
Nto "Set up automatic builds and deploys with GitHub", and
build/index.htmlalready exists. Overwrite?".
You may see the following warning from Chrome when visiting the reference deployment. This may be because Rocket used "Instagram" as our app name and we have "instagram" in our URL. To visit the site anyway, click "Details" and "visit this unsafe site" like in the screenshots below.
Chrome warns us of deceptive sites. Source: Rocket Academy
To visit the site anyway, click "visit this unsafe site". Source: Rocket Academy