{"id":20394651,"url":"https://github.com/justinline/usebacknavigation","last_synced_at":"2026-05-10T03:13:23.084Z","repository":{"id":244466159,"uuid":"815261003","full_name":"justinline/useBackNavigation","owner":"justinline","description":"react-router hook for smarter back navigation in complex SPAs","archived":false,"fork":false,"pushed_at":"2024-06-14T21:30:26.000Z","size":50,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-05T00:43:36.696Z","etag":null,"topics":["history","hooks","react","react-router","remix","routing"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/justinline.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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-06-14T17:51:13.000Z","updated_at":"2024-06-17T17:04:42.000Z","dependencies_parsed_at":"2024-06-14T22:39:58.468Z","dependency_job_id":"b272334a-158e-4183-9aa1-5b3773171e95","html_url":"https://github.com/justinline/useBackNavigation","commit_stats":null,"previous_names":["justinline/usebacknavigation"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/justinline/useBackNavigation","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justinline%2FuseBackNavigation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justinline%2FuseBackNavigation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justinline%2FuseBackNavigation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justinline%2FuseBackNavigation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/justinline","download_url":"https://codeload.github.com/justinline/useBackNavigation/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justinline%2FuseBackNavigation/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261624970,"owners_count":23186120,"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":["history","hooks","react","react-router","remix","routing"],"created_at":"2024-11-15T03:53:52.714Z","updated_at":"2026-05-10T03:13:23.037Z","avatar_url":"https://github.com/justinline.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# useBackNavigation()\n\nA hook used in react-router apps that solves common problems:\n\n## Problem 1\n\n- Your web app has modals (under urls) which open and have the ability to be closed by an X or similar\n- Your modals also have sub-routes/sub-pages which the user can navigate through, pushing to the history stack\n- When you click the X, you want to close the entire modal and go back to where you opened it from, regardless of where you navigated to since opening it\n\n```tsx\nfunction MyModal() {\n    const { backUrl } = useBackNavigation();\n\n    return (\n        \u003cdialog\u003e\n            \u003ch1\u003eMy Modal\u003c/h1\u003e\n            \u003cnav\u003e\n            \u003cul\u003e\n                \u003cli\u003e\u003cLink to=\"modal/sub-route\"\u003eSub-Route\u003c/Link\u003e\u003c/li\u003e\n                \u003cli\u003e\u003cLink to=\"modal/sub-route-2\"\u003eSub-Route 2\u003c/Link\u003e\u003c/li\u003e\n            \u003c/ul\u003e\n            \u003c/nav\u003e\n            {/* This will never change while the modal is mounted. */}\n            \u003cLink to={backUrl}\u003eClose\u003c/Link\u003e\n        \u003c/dialog\u003e\n    );\n}\n\nfunction Dashboard() {\n    const { createBackUrlState } = useBackNavigation();\n    return (\n        \u003cdiv\u003e\n            \u003ch1\u003eDashboard\u003c/h1\u003e\n            \u003cLink to=\"modal-route\" state={createBackUrlState()}\u003eOpen Modal\u003c/Link\u003e\n        \u003c/div\u003e\n    );\n}\n```\n\n\n1. `useBackNavigation()` is used in the modal component that we want to open.\n1.  Entrypoints to said modal (links, buttons, `useNavigate` etc) use `useBackNavigation()` to push to `location.state` when they navigate i.e `\u003cLink to=\"modal/route\" state={createBackUrlState()}\u003eOpen Modal\u003c/Link\u003e`\n1. `useBackNavigation()` in point 1 sets the `backUrl` from `location.state` that was pushed in 2 and can now build functions that will navigate to that `backUrl` when triggered.\n1. Closing X in the modal has something like `\u003cLink to={backUrl}\u003eClose\u003c/Link\u003e`\n\n\n\n## Problem 2\n\n- A user lands at your app on a modal with a closing X\n- We have no previous in-app route to go back to, so we just want to go back to the root of the app\n\n```tsx\nfunction MyModal() {\n    const { backUrl } = useBackNavigation();\n\n    return (\n        \u003cdialog\u003e\n            \u003ch1\u003eMy Modal\u003c/h1\u003e\n            \u003cLink to={backUrl ?? '/'}\u003eClose\u003c/Link\u003e\n        \u003c/dialog\u003e\n    );\n}\n```\n\n1. if `backUrl` is undefined, we want can fallback to a desired route.\n\n## Problem 3\n\n- When a user clicks to go back, i.e on a \"back arrow\" in a header of some sort\n- You want to go back to the previous route that was in the URL bar before they clicked the back arrow\n- However, it might be that they landed on said route from somewhere outside the app\n- We don't want to send the user back outside the app\n- If we detect that a route is a \"landing route\" by using the `useSetLandingRoute` we can detect this and act accordingly.\n- When the user clicks back we can do the following:\n  - Is it a landing route? Go to the root of the app\n  - Do we have a backUrl in the state? Go to that route\n  - Otherwise, `navigate(-1)` on the browser history\n\n```tsx\nfunction AppRoot() {\n    useSetLandingRoute();\n\n    return \u003cAppRoutes /\u003e\n}\n\nfunction SomePageWithBackArrow() {\n    const { onBack } = useBackNavigation();\n\n    return (\n        \u003cheader\u003e\n            \u003cbutton type=\"button\" onClick={onBack}\u003eBack\u003c/button\u003e\n            \u003cp\u003econtent...\u003c/p\u003e\n        \u003c/header\u003e\n    );\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjustinline%2Fusebacknavigation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjustinline%2Fusebacknavigation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjustinline%2Fusebacknavigation/lists"}