# 2.E.5: Instagram Routes

## Learning Objectives

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

## Introduction

We will build on previous Instagram exercises to incorporate React Router and create standalone pages for each post with relevant URLs.

## Setup

1. Start with the code we wrote in the previous exercise in our forked and cloned copy of the [Rocket Academy Instagram starter repo](https://github.com/rocketacademy/instagram-3.2)
2. Set up React Router in our repo as per the official [React Router documentation](https://reactrouter.com/en/6.18.0/start/overview#nested-routes)
3. Practice safe sharing, create implement your .env so that you do not share your Firebase credentials online when pushing to GitHub.

{% hint style="info" %}
**We will deploy on Firebase Hosting instead of GitHub Pages**
{% endhint %}

## Base: Split `Home` and `AuthForm` pages into separate routes

In Instagram Auth we created an `AuthForm` component that renders instead of the `NewsFeed` component when our user wants to sign in. We will now create separate routes for `AuthForm` (`/authform`) and `NewsFeed` (`/`) components to make it easier for users to navigate to the auth form and news feed respectively. Consider referring back to the [React Router Implementation section](https://reactrouter.com/en/6.18.0/start/overview#client-side-routing)..

Now that we will use Links and Routes to navigate between our auth form and news feed, we no longer need `shouldRenderAuthForm` state and the `toggleAuthForm` method to determine whether to render the auth form. We can remove all mentions of `shouldRenderAuthForm` and `toggleAuthForm` from `App`, and update `toggleAuthForm` usage to either a React Router `Link` to `/authform` or `useNavigate`/`navigate` to `/` 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 `AuthForm` that need the React Router `useNavigate` hook. 

## Comfortable: Dedicated page and route for each post

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](https://reactrouter.com/docs/en/v6/getting-started/tutorial#reading-url-params) in React Router helpful for creating and using a relevant URL for each post.

## More Comfortable: Navbar, chat page

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.

## Submission

Submit a pull request to the `main` branch 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 Vitejs GitHub Pages [deployment instructions here](https://vitejs.dev/guide/static-deploy.html). Note that you will need to add the repo name within React Router's to and path properties. 

## Reference Solution

Here is [reference code](https://github.com/rocketacademy/instagram-3.2/tree/solution-routes-base) and a [reference deployment](https://instagram-bootcamp-3.web.app/) for this exercise. You can do better**!**

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](/files/l3ixR9HgUwLkZPixvjEQ)

![To visit the site anyway, click "visit this unsafe site". Source: Rocket Academy](/files/J0aDAYEmE0eyKjjVmUGC)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://bc.rocketacademy.co/2-full-stack/2.e-exercises/2.e.5-instagram-routes.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.