{"id":16399220,"url":"https://github.com/alextes/hackjam.react-router-4","last_synced_at":"2026-06-10T20:31:49.498Z","repository":{"id":77015067,"uuid":"103379752","full_name":"alextes/hackjam.react-router-4","owner":"alextes","description":"Solutions to an exercise by Hackages!","archived":false,"fork":false,"pushed_at":"2018-10-26T12:24:58.000Z","size":489,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-04-05T20:39:22.578Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/alextes.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":"2017-09-13T09:21:52.000Z","updated_at":"2019-06-11T12:05:47.000Z","dependencies_parsed_at":"2023-03-11T23:57:23.639Z","dependency_job_id":null,"html_url":"https://github.com/alextes/hackjam.react-router-4","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/alextes/hackjam.react-router-4","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alextes%2Fhackjam.react-router-4","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alextes%2Fhackjam.react-router-4/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alextes%2Fhackjam.react-router-4/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alextes%2Fhackjam.react-router-4/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alextes","download_url":"https://codeload.github.com/alextes/hackjam.react-router-4/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alextes%2Fhackjam.react-router-4/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34170162,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-10T02:00:07.152Z","response_time":89,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-10-11T05:23:23.050Z","updated_at":"2026-06-10T20:31:49.481Z","avatar_url":"https://github.com/alextes.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# HackJam React-Router 4\nDuring this HackJam you'll learn how to use the latest version of React-Router 4\n## Getting started\n\n```bash\ngit clone https://github.com/hackages/hackjam.react-router-4\ncd hackjam.react-router-4\nyarn start\n# Happy hacking ;)\n```\n\n## Todos\n### RCMOD (Red Console Message Of Death) ☠️\n\nThe app should NOT work when you first start it.\n\nYou're going to run into a bunch of errors and whatnots, make sure that your app runs fine before going further.\n\n### Routing oh sweet routing 🚗...\n\nImplement the following routes\n\n/:id =\u003e src/Components/BookDetail\n\n/books =\u003e src/Components/Books\n\n/dashboard =\u003e src/Components/Dashboard\n\n/ =\u003e src/Components/Dashboard\n\nYou should only have one route rendered when you're on the / route, if not fix it!\n\n### Fancy a NavLink? 👌🏻\n\nIn your nav, you should add the 'activeLink' class to your links if the url matches their pathname\n\n### RESTRICTED ACCESS ✋\n\nWrite a higher order route that'll protect your routes from un-authenticated users.\n\nYou'll find instructions for that one in src/hor/ProtectedRoute.js\n\n### Those are not the search results you're looking for 🙈\n\nOn the dashboard page in the BookSearch component, have the search update the URL in order to be able to share your search results\n\nWhen that component is loaded, verify whether the url contains a search query and fire a search if so.\n\n\u003e hint: use the withRouter Higher order component\n\n### Going back \n\nOn the detail page of a book, implement the back button\n\n### Persistance is the key 🔑\n\nIts annoying for users to re-login on page refresh (duh).\n\nPersist the auth state in the localStorage.\n\n## Bonus\n### HIGHER ORDER HIGHER ORDER HIGHER ORDER\nWrite a higher order component that'll update the object location.state with the following whenever you navigate:\n```json\n{\n  \"from\": \"/current-page\"\n}\n```\nWhen you've done that, use location.state.from to redirect to the previous page when an un-authenticated \nuser navigates to your ProtectedRoute \n\n### Redux to the rescue\nSo you've gone through the whole thing, eh?\n\nLets make your app redux-friendly.\n\nYou should keep your navigation history in redux, you should also be able to dispatch \nactions to navigate from redux.\n\nWhen you've done that, update your app to use those actions.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falextes%2Fhackjam.react-router-4","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falextes%2Fhackjam.react-router-4","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falextes%2Fhackjam.react-router-4/lists"}