{"id":23127433,"url":"https://github.com/ryanez/nav-paths","last_synced_at":"2026-05-05T21:34:41.897Z","repository":{"id":35904800,"uuid":"219760603","full_name":"ryanez/nav-paths","owner":"ryanez","description":"Navigation paths for react-router","archived":false,"fork":false,"pushed_at":"2023-01-05T00:39:14.000Z","size":1923,"stargazers_count":0,"open_issues_count":36,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-14T07:36:54.929Z","etag":null,"topics":["navigation","paths","react","react-router"],"latest_commit_sha":null,"homepage":null,"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/ryanez.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}},"created_at":"2019-11-05T14:08:56.000Z","updated_at":"2019-11-09T00:33:31.000Z","dependencies_parsed_at":"2023-01-16T09:00:53.041Z","dependency_job_id":null,"html_url":"https://github.com/ryanez/nav-paths","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/ryanez%2Fnav-paths","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanez%2Fnav-paths/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanez%2Fnav-paths/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanez%2Fnav-paths/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ryanez","download_url":"https://codeload.github.com/ryanez/nav-paths/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247128742,"owners_count":20888234,"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":["navigation","paths","react","react-router"],"created_at":"2024-12-17T09:09:54.173Z","updated_at":"2026-05-05T21:34:36.858Z","avatar_url":"https://github.com/ryanez.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# nav-paths\n\n[![NPM version](https://badgen.net/npm/v/nav-paths)](https://www.npmjs.com/package/nav-paths)\n[![License](https://badgen.net/npm/license/nav-paths)](https://www.npmjs.com/package/nav-paths)\n[![Build status](https://badgen.net/travis/ryanez/nav-paths)](https://travis-ci.org/ryanez/nav-paths)\n[![Coverage Status](https://coveralls.io/repos/github/ryanez/nav-paths/badge.svg?branch=master)](https://coveralls.io/github/ryanez/nav-paths?branch=master)\n\nA simple utility to create Navigation paths for react-router, such way it makes easy to \nhave in a single place all your application paths and to create urls to connect your \ndifferent pages.\n\n## Install\n```\nnpm install nav-paths --save\n```\n\n## Usage\n```js\nimport navigate from './navigate';\nconst profileId = 2;\n// second parameter `followLink=false` indicates it should\n// only create the link.\nconst profileUrl = navigate.to.ProfileDetails({ profileId }, false);\n// /profiles/2\n\n// by default `followLink=true` this will push the url into\n// browser history causing immediate navigation.\nnavigate.to.ProfileEdit({ profileId });\n// /profiles/2/edit\n```\n\nCreate and expose your application paths.\n\n```js\n// file paths.js\nexport const Home = '/';\nexport const AboutUs = '/about-us';\nexport const Profiles = '/profiles';\nexport const ProfileNew = `${Profiles}/new`;\nexport const ProfileDetails = `${Profiles}/:profileId`;\nexport const ProfileEdit = `${ProfileDetails}/edit`;\n\nexport const HomeWithLanguage = `/:lang`;\nexport const Customer = `${HomeWithLanguage}/customer/:customerId`;\nexport const CustomerAddresses = `${Customer}/addresses`\nexport const Invoices = `${Customer}/invoices`;\nexport const Invoice = `${Invoices}/:invoiceId`;\nexport const InvoicePayments = `${Invoice}/payments`;\n```\n\n```js\n// file navigate.js\nimport { createBrowserHistory } from 'history';\nimport createNavigation from 'nav-paths';\nimport * as Paths from 'paths';\n\nexport { Paths };\nexport const history = createBrowserHistory();\nexport default createNavigation(history, Paths);\n```\n\n## API\n### createNavigation\n`createNavigation(history, Paths)` Will return an object exposing the navigation utility methods.\n\n- `to.somePath(params, followLink)`. `to` is map containg all the given `paths` as `functions` that can build URLs and navigate to them.\n  ```js\n  // will immeditelly navigate to home page.\n  navigate.to.Home();\n\n  const url = navigate.to.ProfileNew({}, false);\n  // will return \"/profiles/new\" without navigation.\n\n  const profileUrl = navigate.to.ProfileDetails({ profileId: 3 }, false);\n  // will return \"/profiles/3\" without navigation.\n  ```\n\n- `from.somePath.to.SomePath(params, followLink)`. `from` is a map of all the given paths where each item contains a `to` property which is also a map to all the given paths. Use this method when you certainly know where you are at a given moment. eg Inside `\u003cInvoicePayments /\u003e` component you are sure the current url on the browser will be `/:lang/customer/:customerId/invoices/:invoiceId/payments` and you want to navigate to `/:lang/customer/:customerId/addresses` without having to specify `{lang, customerId}` because they already are on the url.\n  ```js\n  // having on browser's url \"/es-MX/customer/cust-01/invoices/INV009/payment\"\n  const url = navigate.from.InvoicePayments.to.CustomerAddresses({}, false);\n  // -\u003e \"/es-MX/customer/cust-01/addresses\"\n\n  // you replace only one param from the URL.\n  const url = navigate.from.InvoicePayments.to.InvoicePayments({ lang: 'en-us' }, false);\n  // -\u003e \"/en-us/customer/cust-01/invoices/INV009/payment\"\n  ```\n- `replace.somePath(params, followLink)`. Will replace the given params from the current browser URL.\n  ```js\n  // having on browser's url \"/es-MX/customer/cust-01/invoices/INV009/payment\"\n\n  const url = navigate.replace.InvoicePayments({ lang: 'en-US' }, false);\n  // -\u003e \"/en-US/customer/cust-01/invoices/INV009/payment\"\n  ```\n\n- `isPath.somePath(url, options)`. Will test the given url with the current history location and return a boolean value.\n  ```js\n  // having on history pathname \"/profiles/4/edit\"\n  const { isPath } = navigate;\n\n  console.log(isPath.ProfileEdit(\"/profiles/4/edit\"));\n  // -\u003e true\n  console.log(isPath.ProfileEdit(\"/profiles/4/edit\", { exact: true }));\n  // -\u003e true\n  console.log(isPath.ProfileEdit(\"/profiles\"));\n  // -\u003e true\n  console.log(isPath.ProfileEdit(\"/profiles\", { exact: true }));\n  // -\u003e false\n  console.log(isPath.ProfileEdit(\"/profiles/new\"));\n  // -\u003e false\n  ```\n\n- `isPath.somePath.exact(url)`. Will test the given url against the current history location with the option `{ exact: true }` as default.\n  ```js\n  // having on history pathname \"/profiles/4/edit\"\n  const { isPath } = navigate;\n\n  console.log(isPath.ProfileEdit.exact(\"/profiles/4/edit\"));\n  // -\u003e true\n  console.log(isPath.ProfileEdit.exact(\"/profiles\");\n  // -\u003e false\n  console.log(isPath.ProfileEdit.exact(\"/profiles/new\"));\n  // -\u003e false\n  ```\n- `clearHash()`. Handy shortcut to remove the hash from the url.\n  ```js\n  // having on browser url \"/profiles/4/edit#help\"\n\n  navigate.clearHash();\n\n  // browser's url will be now \"/profiles/4/edit\"\n  ```\n\n- `isActive(url, options)`. Matches the current history.pathname against the given URL, internally uses `matchPath` from `react-router`.\n  ```js\n  // having on history pathname \"/profiles/4/edit\"\n  const { isActive } = navigate;\n\n  console.log(isActive(\"/profiles/4/edit\"));\n  // -\u003e true\n  console.log(isActive(\"/profiles/4/edit\", { exact: true }));\n  // -\u003e true\n  console.log(isActive(\"/profiles\"));\n  // -\u003e true\n  console.log(isActive(\"/profiles\", { exact: true }));\n  // -\u003e false\n  console.log(isActive(\"/profiles/new\"));\n  // -\u003e false\n  ```\n\n- `isActive.exact(url, options)`. Matches the current `history.pathname` against the given URL, internally uses `matchPath` from `react-router` and sets options to `{ exact: true }` by default.\n  ```js\n  console.log(isActive.exact(\"/profiles/4/edit\"));\n  // -\u003e true\n  console.log(isActive.exact(\"/profiles\");\n  // -\u003e false\n  console.log(isActive.exact(\"/profiles/new\"));\n  // -\u003e false\n  ```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanez%2Fnav-paths","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fryanez%2Fnav-paths","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanez%2Fnav-paths/lists"}