{"id":21244115,"url":"https://github.com/aaronksaunders/mysimpletabsapp","last_synced_at":"2025-03-15T04:24:22.052Z","repository":{"id":139353014,"uuid":"190325290","full_name":"aaronksaunders/mySimpleTabsApp","owner":"aaronksaunders","description":"Working with the new ionic cli generating an app with tabs and a login page","archived":false,"fork":false,"pushed_at":"2019-10-13T18:23:53.000Z","size":245,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-21T20:11:27.093Z","etag":null,"topics":["ionic-framework","ionic4","login","reactjs","tabs"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aaronksaunders.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-06-05T04:22:50.000Z","updated_at":"2023-05-02T11:58:09.000Z","dependencies_parsed_at":null,"dependency_job_id":"12a9cb1c-2937-494e-b552-566e4857242a","html_url":"https://github.com/aaronksaunders/mySimpleTabsApp","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronksaunders%2FmySimpleTabsApp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronksaunders%2FmySimpleTabsApp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronksaunders%2FmySimpleTabsApp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronksaunders%2FmySimpleTabsApp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aaronksaunders","download_url":"https://codeload.github.com/aaronksaunders/mySimpleTabsApp/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243683208,"owners_count":20330575,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ionic-framework","ionic4","login","reactjs","tabs"],"created_at":"2024-11-21T01:16:19.798Z","updated_at":"2025-03-15T04:24:22.046Z","avatar_url":"https://github.com/aaronksaunders.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# mySimpleTabsApp\n\nWorking with the new ionic cli generating an app with tabs and a login page\n\n\n##Getting Started\n\nuse the ionic cli to build your app, make sure you specify react and we are going to use the tab starter as our baseline and then move some things around to get the desired results. \n\n\u003eSee blog post for more detailed instructions on getting started\n\nEnter into console, and when prompted select `tabs` as the starter template\n```\n$ ionic start myApp --type=react\n```\nSo lets clean up some of this and create a more structured starting point.\n\nCreate a new file called `TabRoot.tsx` and copy everything from inside of the `IonApp` element in `App.tsx` over to the new component. When you are done, `App.tsx` should look like this\n\n```tsx\nconst App: React.SFC = () =\u003e (\n  \u003cRouter\u003e\n    \u003cRoute exact path=\"/\" render={() =\u003e \u003cRedirect to=\"/tab1\"/\u003e} /\u003e\n    \u003cdiv className=\"App\"\u003e\n      \u003cIonApp\u003e\n\n      \u003c/IonApp\u003e\n    \u003c/div\u003e\n  \u003c/Router\u003e\n);\n```\nRemove this line\n```tsx\n    \u003cRoute exact path=\"/\" render={() =\u003e \u003cRedirect to=\"/tab1\"/\u003e} /\u003e\n```\nThen add the new default `Route` to point to the `TabRoot` component we just built\n```tsx\nconst App: React.SFC = () =\u003e (\n  \u003cRouter\u003e\n    \u003cdiv className=\"App\"\u003e\n      \u003cIonApp\u003e\n         \u003cRoute path=\"/\" component={TabRoot} /\u003e\n      \u003c/IonApp\u003e\n    \u003c/div\u003e\n  \u003c/Router\u003e\n);\n```\nAnd `TabRoot.tsx` should look like this after pasting the code we cut from `App.tsx`.\n\n\u003ePlease note I have removed the imports to save space when looking at the code. I also have reduced the number of tabs from three to two, I believe that is sufficcient to make my point.\n\n```tsx\ninterface IAppProps {}\n\nconst TabRoot: React.FC\u003cIAppProps\u003e = props =\u003e {\n  return (\n    \u003cIonPage id=\"main\"\u003e\n      \u003cIonTabs\u003e\n        \u003cIonRouterOutlet\u003e\n          \u003cRoute path=\"/:tab(tab1)\" component={Tab1} exact={true} /\u003e\n          \u003cRoute path=\"/:tab(tab2)\" component={Tab2} /\u003e\n        \u003c/IonRouterOutlet\u003e\n        \u003cIonTabBar slot=\"bottom\"\u003e\n          \u003cIonTabButton tab=\"schedule\" href=\"/tab1\"\u003e\n            \u003cIonIcon name=\"flash\" /\u003e\n            \u003cIonLabel\u003eTab One\u003c/IonLabel\u003e\n          \u003c/IonTabButton\u003e\n          \u003cIonTabButton tab=\"speakers\" href=\"/tab2\"\u003e\n            \u003cIonIcon name=\"apps\" /\u003e\n            \u003cIonLabel\u003eTab Two\u003c/IonLabel\u003e\n          \u003c/IonTabButton\u003e\n        \u003c/IonTabBar\u003e\n      \u003c/IonTabs\u003e\n    \u003c/IonPage\u003e\n  );\n};\n\nexport default TabRoot;\n```\nNow the application is set up such that the default route is to render the `TabRoot` component, but we need to tell the component which to render and we want it to be\n```html\n\u003cIonRouterOutlet\u003e\n    \u003cRoute path=\"/:tab(tab1)\" component={Tab1} exact={true} /\u003e\n    \u003cRoute path=\"/:tab(tab2)\" component={Tab2} /\u003e\n    \u003cRoute path=\"/\" render={() =\u003e \u003cRedirect to=\"/tab1\" /\u003e} /\u003e \n\u003c/IonRouterOutlet\u003e\n```\n### Why Bother?\nHaving all of the default routing based around tabs at the route level of the application can become problematic as the application gets more complex. As you will see in the later sections when the app has to check for authenticated user and protected routes, this setup will be beneficial\n\n### Cleanup Tab1\nThere is alot of noise in `Tab1` so lets make it look like tab2, copy contents from `Tab2` into `Tab1`\n```tsx\nimport React from 'react';\nimport { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/react';\n\nconst Tab1: React.SFC = () =\u003e {\n  return (\n    \u003c\u003e\n      \u003cIonHeader\u003e\n        \u003cIonToolbar\u003e\n          \u003cIonTitle\u003eTab One\u003c/IonTitle\u003e\n        \u003c/IonToolbar\u003e\n      \u003c/IonHeader\u003e\n      \u003cIonContent /\u003e\n    \u003c/\u003e\n  );\n};\n\nexport default Tab1;\n```\n## Navigating to Detail Pages\nLets just copy `Tab1.tsx` and rename it `Tab1-Detail.tsx`... clean it up so it looks like this when you are done.\n```tsx\nimport React from 'react';\nimport { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/react';\n\nconst Tab1Detail: React.SFC = () =\u003e {\n  return (\n    \u003c\u003e\n      \u003cIonHeader\u003e\n        \u003cIonToolbar\u003e\n          \u003cIonTitle\u003eTab One Detail\u003c/IonTitle\u003e\n        \u003c/IonToolbar\u003e\n      \u003c/IonHeader\u003e\n      \u003cIonContent /\u003e\n    \u003c/\u003e\n  );\n};\n\nexport default Tab1Detail;\n```\nAdd button in the content section of `Tab1`; we will use that button to navigate to the detail page `Tab1Detail` that we just created.\n```tsx\n\u003cIonContent\u003e\n    \u003cIonButton\n        expand=\"full\"\n        style={{ margin: \"14\" }}\n        onClick={e =\u003e {\n            e.preventDefault();\n            props.history.push(\"/tab1-detail\");\n        }}\n    \u003e NEXT PAGE\u003c/IonButton\u003e\n\u003c/IonContent\u003e\n```\nSo a few problems when you make this change, the first one is\n\u003eWhere are the props.history coming from?\n\nWe can use react-router `withRouter` to get the `history` object passed along as a property to the component\n```tsx\n// add the import..\nimport { withRouter } from \"react-router\";\n```\nThen add parameter, and for now we will specify the type as `any`\n```tsx\nconst Tab1: React.SFC\u003cany\u003e = (props) =\u003e {\n```\nFinally we need to add the actual route to the `Router` element in `TabRoot`, So add the new route.\n```tsx\n\u003cIonRouterOutlet\u003e\n    \u003cRoute path=\"/:tab(tab1)\" component={Tab1} /\u003e\n    \u003cRoute path=\"/:tab(tab1-detail)\" component={Tab1Detail} /\u003e\n    \u003cRoute path=\"/:tab(tab2)\" component={Tab2} /\u003e\n    \u003cRoute path=\"/\" render={() =\u003e \u003cRedirect to=\"/tab1\" /\u003e} /\u003e \n\u003c/IonRouterOutlet\u003e\n```\nNow to go back, we need to first add the `IonBackButton` component to the toolbar on the `Tab1Detail` page","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faaronksaunders%2Fmysimpletabsapp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faaronksaunders%2Fmysimpletabsapp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faaronksaunders%2Fmysimpletabsapp/lists"}