> For the complete documentation index, see [llms.txt](https://enappd.gitbook.io/ionic-5-react-capacitor-full-app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://enappd.gitbook.io/ionic-5-react-capacitor-full-app/how-to-use-this-template/removing-a-page-component.md).

# Removing a Page / Component

## **Steps to remove undesired page from the App**

Removing a page from the app is pretty straight-forward. You just remove the target folder from the code, and remove the routing associated with it. Also, if this folder or any of its child pages are imported in some other page, you need to remove those as well. 

In some cases, there can be nested routing. Let's see an example of removing a nested routed page - Netflix Layout

* Go to `App.tsx` file.
* Check if the page you want to remove is a direct child of main routing, or is a nested routing child. In our case, `Netflix` layout is part of the `Layouts` folder. We see a `LayoutIndex` route in the `App.tsx` file. That means the `Netflix` page is not directly routed

![](https://1913718610-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LrE4OltZqdI7pBHnBKw%2F-LrI1M2vMr2fX1YD5_RP%2F-LrI2gvMso2Foe_WYm1z%2FScreenshot%202019-10-16%20at%2010.59.29%20AM.png?alt=media\&token=59797b01-3684-484b-bf40-6e638cfb5631)

* Now, follow this route to find another routing file in `Layouts` folder. The file is called `LayoutIndex.ts` in our case
* You will see your target route in this location. Select and delete it

![](https://1913718610-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LrE4OltZqdI7pBHnBKw%2F-LrI1M2vMr2fX1YD5_RP%2F-LrI33LIWReUdySbuMM1%2FScreenshot%202019-10-16%20at%2010.59.37%20AM.png?alt=media\&token=d2a432a3-a280-4475-b72d-8f1ade6aeb7c)

* Remove the import line for `Netflix` as well from this file. Also, check if `Netflix` page was imported in some other page, and remove that import and its usage as well
* You should remove the `Netflix` code folder from the project as well, but you can choose to keep it if you think you'll need it in future

## **Steps to remove undesired component from the Ap**‌p

{% hint style="info" %}
Components do not have direct routes in routing files, but they are often imported in many different pages and/or components.
{% endhint %}

* Locate the component folder in the project. Note the export variable name as this will be used for importing the component in other pages / components

![](https://1913718610-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LrE4OltZqdI7pBHnBKw%2F-LrI1M2vMr2fX1YD5_RP%2F-LrI4Q6VcbcFWiAUDWyF%2FScreen%20Shot%202019-10-16%20at%2011.10.33%20AM.png?alt=media\&token=46b77a87-38b9-4e7d-ab4e-53e0525daf2a)

In this case, we can see `FirebaseContext` and `withFirebase` as the export variables.

* Do a global search of these variable names, and remove the imports from all the files

![](https://1913718610-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LrE4OltZqdI7pBHnBKw%2F-LrI1M2vMr2fX1YD5_RP%2F-LrI55yTnhjR-i4Jj-I5%2FScreen%20Shot%202019-10-16%20at%2011.13.17%20AM.png?alt=media\&token=d2219378-6fab-404c-b2b2-6471a6930d2b)

* Along with the imports, you will have to remove all the features using these variables as well
* You are free to delete the component folder or keep it in the project. Once the imports are removed, it won't affect remaining code