{"id":23403428,"url":"https://github.com/selmasaltik/advanced-routing","last_synced_at":"2026-05-05T04:03:38.465Z","repository":{"id":260106875,"uuid":"878453700","full_name":"selmasaltik/advanced-routing","owner":"selmasaltik","description":"Building a Multi-Page SPA with React Router /// What I learned from \"React - The Complete Guide 2024 (incl. Next.js, Redux) - Academind by Maximilian Schwarzmüller\"","archived":false,"fork":false,"pushed_at":"2024-10-29T22:18:33.000Z","size":226,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-08T22:41:50.015Z","etag":null,"topics":["action","data-fetching","loader","multi-page-application","react","react-router","react-router-dom","react-router-dom-v6","react-router-v5","routing","spa","submission"],"latest_commit_sha":null,"homepage":"https://advanced-routing-nine.vercel.app","language":"JavaScript","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/selmasaltik.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":"2024-10-25T12:25:33.000Z","updated_at":"2024-10-29T22:24:43.000Z","dependencies_parsed_at":"2025-02-14T17:54:19.479Z","dependency_job_id":null,"html_url":"https://github.com/selmasaltik/advanced-routing","commit_stats":null,"previous_names":["selmasaltik/advanced-routing"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/selmasaltik/advanced-routing","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/selmasaltik%2Fadvanced-routing","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/selmasaltik%2Fadvanced-routing/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/selmasaltik%2Fadvanced-routing/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/selmasaltik%2Fadvanced-routing/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/selmasaltik","download_url":"https://codeload.github.com/selmasaltik/advanced-routing/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/selmasaltik%2Fadvanced-routing/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266048706,"owners_count":23868744,"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":["action","data-fetching","loader","multi-page-application","react","react-router","react-router-dom","react-router-dom-v6","react-router-v5","routing","spa","submission"],"created_at":"2024-12-22T12:47:51.467Z","updated_at":"2026-05-05T04:03:33.429Z","avatar_url":"https://github.com/selmasaltik.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Single-Page Application Routing\n***Multiple Pages In Single-Page Apps***\n\n- What \u0026 Why?\n- Using **React Router**\n- Data Fetching \u0026 Submission\n\n**[What is a Routing?](https://www.canva.com/design/DAGUZeFzIEk/JNvvhxEUAVmKU876CcQ92Q/view?utm_content=DAGUZeFzIEk\u0026utm_campaign=designshare\u0026utm_medium=link\u0026utm_source=editor)**\n\n**[Multi-Page Routing](https://www.canva.com/design/DAGUZeSCu44/8pe2iINdFSjCoEkvyqFE8g/view?utm_content=DAGUZeSCu44\u0026utm_campaign=designshare\u0026utm_medium=link\u0026utm_source=editor)**\n\n**Building SPAs**\n\n- When building complex user interfaces, we typically build ***Single Page Applications*** (SPAs)\n- ***Only one initial HTML request \u0026 response***\n- ***Page (URL) changes are then handled by client-side React code***\n- Visible content is changed without fetching a new HTML file\n\n**[React Router](https://reactrouter.com/en/main)**\n\n**How To Use**\n\nThis project actually contains two projects:\n- A React.js application (i.e., the frontend SPA)\n- A dummy backend API to which the React app can \"talk\" (to send + fetch data)\n\nYou must run \"npm install\" in both project folders.\n\nThereafter, you can start the dummy backend API server via \"npm start\" (inside the \"backend\" folder).\nThe React app dev server is then also started via \"npm start\" (though inside the \"frontend\" folder).\n\nYou MUST have both servers (backend + frontend) up and running for the projects to work.\n\nThe dummy backend API does not use any external database - instead the dummy data is saved to an \"events.json\" file inside the project folder.\n\n**Upgrading from React Router v5** \n\nReact Router v5 is also still used in many projects. In case you want to learn how to update from v5 to v6, the following two (free) videos should be very helpful:\n\n- Upgrading from v5 to v6: https://www.youtube.com/watch?v=zEQiNFAwDGo\n- Upgrading from v6 to v6.4 (introduced key data fetching features): https://www.youtube.com/watch?v=L2kzUg6IzxM\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fselmasaltik%2Fadvanced-routing","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fselmasaltik%2Fadvanced-routing","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fselmasaltik%2Fadvanced-routing/lists"}