{"id":18328941,"url":"https://github.com/dollarshaveclub/react-passage","last_synced_at":"2025-09-11T23:33:24.665Z","repository":{"id":33661072,"uuid":"154521384","full_name":"dollarshaveclub/react-passage","owner":"dollarshaveclub","description":"Link and Redirect to routes safely in your react applications 🌄","archived":false,"fork":false,"pushed_at":"2023-01-07T04:37:58.000Z","size":1958,"stargazers_count":58,"open_issues_count":24,"forks_count":5,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-03-21T15:11:05.475Z","etag":null,"topics":["context-api","javascript","react","react-router"],"latest_commit_sha":null,"homepage":"https://dollarshaveclub.github.io/react-passage/","language":"JavaScript","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/dollarshaveclub.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-10-24T15:05:44.000Z","updated_at":"2024-06-11T15:23:16.000Z","dependencies_parsed_at":"2023-01-15T02:00:23.291Z","dependency_job_id":null,"html_url":"https://github.com/dollarshaveclub/react-passage","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dollarshaveclub%2Freact-passage","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dollarshaveclub%2Freact-passage/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dollarshaveclub%2Freact-passage/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dollarshaveclub%2Freact-passage/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dollarshaveclub","download_url":"https://codeload.github.com/dollarshaveclub/react-passage/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247423476,"owners_count":20936621,"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":["context-api","javascript","react","react-router"],"created_at":"2024-11-05T19:15:43.192Z","updated_at":"2025-04-06T01:32:26.203Z","avatar_url":"https://github.com/dollarshaveclub.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg src=\"https://i.imgur.com/IoreaHU.jpg\"\u003e\n\n***\n\n[![npm version](https://badge.fury.io/js/%40dollarshaveclub%2Freact-passage.svg)](https://badge.fury.io/js/%40dollarshaveclub%2Freact-passage)\n\nPassage helps when linking or redirecting to routes that may or may not be in your react app.\n\nThe idea is simple: Wrap Passage around your routes so it knows what routes have been defined in your app. Then, using the `Link` and `Redirect` components from Passage  will honor the HTML5 history API if the route is within your app, otherwise falling back to other means such as anchor tags or `location` redirects.\n\n_Note: There may be some issues with nested react routes. [Read more here](https://github.com/dollarshaveclub/react-passage/issues/1)_.\n\n## Installing\n\nInstall via NPM:\n\n```sh\n\nnpm i @dollarshaveclub/react-passage@latest --save\n\n```\n\n## Usage\n\nPassage provides three exports.\n\n* A `Passage` component used for identifying routes in your app\n* A `Link` component, use this to render react links internal/external routes\n* A `Redirect` component, use this to redirect to internal/external routes\n\n\n### Wrap the `Passage` component around your routes\n\n```js\n\nimport React from 'react'\nimport { BrowserRouter, Route, Switch } from 'react-router-dom'\n\nimport { Passage } from '@dollarshaveclub/react-passage'\n\nconst App = () =\u003e (\n  \u003cPassage\u003e\n    \u003cBrowserRouter\u003e\n      \u003cSwitch\u003e\n        \u003cRoute exact path=\"/\" component={Home} /\u003e\n        \u003cRoute path=\"/about\" component={About} /\u003e\n        \u003cRoute path=\"/topics\" component={Topics} /\u003e\n      \u003c/Switch\u003e\n    \u003c/BrowserRouter\u003e\n  \u003c/Passage\u003e\n)\n\n```\n\nThe Passage component accepts an optional prop called `targets`. This is an array of components that you want to search for within your routes file. It has a value of `[Route]` by default.\n\n```js\n\nconst App = () =\u003e (\n  \u003cPassage targets={[ Route, MyCustomRoute ]}\u003e\n    \u003cBrowserRouter\u003e\n      \u003cSwitch\u003e\n        \u003cMyCustomRoute exact path=\"/\" component={Home} /\u003e\n        \u003cMyCustomRoute path=\"/about\" component={About} /\u003e\n        \u003cRoute path=\"/topics\" component={Topics} /\u003e\n      \u003c/Switch\u003e\n    \u003c/BrowserRouter\u003e\n  \u003c/Passage\u003e\n)\n\n```\n\n### Leverage Passage Links and Redirects\n\n```js\n\nimport React from 'react'\n\nimport {\n  Link,\n  Redirect,\n} from '@dollarshaveclub/react-passage'\n\n// Renders a React Router Link tag if it can, otherwise falls back to an anchor tag\nconst aboutExample = () =\u003e (\u003cLink to='/about'\u003eAbout\u003c/Link\u003e)\n\n// Force Link to render an anchor tag\nconst externalExample = () =\u003e (\u003cLink external to='https://www.google.com'\u003eGoogle\u003c/Link\u003e)\n\n// Redirects with react-history if route exists, otherwise, uses window.location.assign\nconst externalExample = () =\u003e (\u003cRedirect to='/external-path' /\u003e)\n\n// Change how you redirect\nconst changeRedirectExample = () =\u003e (\n  \u003cRedirect to='/new-website' via={(to) =\u003e window.location.href = to} /\u003e\n)\n\n```\n\n# License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdollarshaveclub%2Freact-passage","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdollarshaveclub%2Freact-passage","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdollarshaveclub%2Freact-passage/lists"}