{"id":13493461,"url":"https://github.com/icd2k3/react-router-breadcrumbs-hoc","last_synced_at":"2025-05-15T21:04:23.276Z","repository":{"id":46186814,"uuid":"109050057","full_name":"icd2k3/react-router-breadcrumbs-hoc","owner":"icd2k3","description":"tiny, flexible, HOC for rendering route breadcrumbs with react-router v4 \u0026 5","archived":false,"fork":false,"pushed_at":"2024-09-24T07:53:48.000Z","size":2743,"stargazers_count":301,"open_issues_count":2,"forks_count":42,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-05-12T21:00:42.597Z","etag":null,"topics":["breadcrumbs","hoc","react-router"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/s/react-router-breadcrumbs-hoc-demo-iqmx6?file=/Breadcrumbs.js","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/icd2k3.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","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":"2017-10-31T20:41:21.000Z","updated_at":"2024-10-21T08:44:30.000Z","dependencies_parsed_at":"2024-01-16T09:44:43.377Z","dependency_job_id":"ce02fcba-bdc3-4102-ae51-192edb8b3ab0","html_url":"https://github.com/icd2k3/react-router-breadcrumbs-hoc","commit_stats":{"total_commits":190,"total_committers":9,"mean_commits":21.11111111111111,"dds":0.07894736842105265,"last_synced_commit":"8675c1e5076c399311e09b631bdbcf79b43990c2"},"previous_names":[],"tags_count":49,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/icd2k3%2Freact-router-breadcrumbs-hoc","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/icd2k3%2Freact-router-breadcrumbs-hoc/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/icd2k3%2Freact-router-breadcrumbs-hoc/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/icd2k3%2Freact-router-breadcrumbs-hoc/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/icd2k3","download_url":"https://codeload.github.com/icd2k3/react-router-breadcrumbs-hoc/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254422754,"owners_count":22068678,"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":["breadcrumbs","hoc","react-router"],"created_at":"2024-07-31T19:01:15.420Z","updated_at":"2025-05-15T21:04:23.258Z","avatar_url":"https://github.com/icd2k3.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","目录"],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n  LEGACY\n\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\nThis repository is for legacy support of react-router v5.\u003cbr/\u003e\u003cbr/\u003e\nPlease use \u003ca href=\"https://github.com/icd2k3/use-react-router-breadcrumbs\"\u003euse-react-router-breadcrumbs\u003c/a\u003e and react-router v6 instead.\n\u003c/p\u003e\n\n\u003chr/\u003e\n\n\u003ch3 align=\"center\"\u003e\n  React Router Breadcrumbs HOC\n\u003c/h3\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/icd2k3/react-router-breadcrumbs-hoc/actions\" target=\"_blank\"\u003e\u003cimg src=\"https://github.com/icd2k3/react-router-breadcrumbs-hoc/workflows/Node.js%20CI/badge.svg?branch=master\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://david-dm.org/icd2k3/react-router-breadcrumbs-hoc\" title=\"dependencies status\"\u003e\u003cimg src=\"https://david-dm.org/icd2k3/react-router-breadcrumbs-hoc/status.svg\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://coveralls.io/github/icd2k3/react-router-breadcrumbs-hoc?branch=master\" target=\"_blank\"\u003e\u003cimg src=\"https://coveralls.io/repos/github/icd2k3/react-router-breadcrumbs-hoc/badge.svg?branch=master\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  A small (~1.3kb compressed \u0026 gzipped), flexible, \u003ca href=\"https://reactjs.org/docs/higher-order-components.html\"\u003ehigher order component\u003c/a\u003e for rendering breadcrumbs with \u003ca href=\"https://github.com/ReactTraining/react-router\"\u003ereact-router\u003c/a\u003e 5\n\u003c/p\u003e\n\n\u003chr/\u003e\n  \u003ch4 align=\"center\"\u003e\n    \u003ccode\u003e\n      example.com/user/123 → Home / User / John Doe\n    \u003c/code\u003e\n  \u003c/h4\u003e\n\u003chr/\u003e\n\n\u003c!-- START doctoc generated TOC please keep comment here to allow auto update --\u003e\n\u003c!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --\u003e\n- [Description](#description)\n    - [Features](#features)\n- [Install](#install)\n- [Usage](#usage)\n- [Examples](#examples)\n  - [Simple](#simple)\n  - [Advanced](#advanced)\n- [Route config compatibility](#route-config-compatibility)\n- [Dynamic breadcrumbs](#dynamic-breadcrumbs)\n- [Options](#options)\n  - [Disabling default generated breadcrumbs](#disabling-default-generated-breadcrumbs)\n- [Order matters!](#order-matters)\n- [API](#api)\n\n\u003c!-- END doctoc generated TOC please keep comment here to allow auto update --\u003e\n\n## Description\n\nRender breadcrumbs for `react-router` however you want!\n\n#### Features\n- Easy to get started with automatically generated breadcrumbs.\n- Render, map, and wrap breadcrumbs any way you want.\n- Compatible with existing [route configs](https://reacttraining.com/react-router/web/example/route-config).\n\n## Install\n\n`yarn add react-router-breadcrumbs-hoc`\n\nor\n\n`npm i react-router-breadcrumbs-hoc --save`\n\n## Usage\n\n```js\nwithBreadcrumbs()(MyComponent);\n```\n\n## Examples\n\n### Simple\nStart seeing generated breadcrumbs right away with this simple example ([codesandbox](https://codesandbox.io/s/bare-bones-example-kcdrt))\n```js\nimport withBreadcrumbs from 'react-router-breadcrumbs-hoc';\n\nconst Breadcrumbs = ({ breadcrumbs }) =\u003e (\n  \u003c\u003e\n    {breadcrumbs.map(({ breadcrumb }) =\u003e breadcrumb)}\n  \u003c/\u003e\n)\n\nexport default withBreadcrumbs()(Breadcrumbs);\n```\n\n### Advanced\nThe example above will work for some routes, but you may want other routes to be dynamic (such as a user name breadcrumb). Let's modify it to handle custom-set breadcrumbs. ([codesandbox](https://codesandbox.io/s/basic-dynamic-example-m03tz))\n\n```js\nimport withBreadcrumbs from 'react-router-breadcrumbs-hoc';\n\nconst userNamesById = { '1': 'John' }\n\nconst DynamicUserBreadcrumb = ({ match }) =\u003e (\n  \u003cspan\u003e{userNamesById[match.params.userId]}\u003c/span\u003e\n);\n\n// define custom breadcrumbs for certain routes.\n// breadcumbs can be components or strings.\nconst routes = [\n  { path: '/users/:userId', breadcrumb: DynamicUserBreadcrumb },\n  { path: '/example', breadcrumb: 'Custom Example' },\n];\n\n// map, render, and wrap your breadcrumb components however you want.\nconst Breadcrumbs = ({ breadcrumbs }) =\u003e (\n  \u003cdiv\u003e\n    {breadcrumbs.map(({\n      match,\n      breadcrumb\n    }) =\u003e (\n      \u003cspan key={match.url}\u003e\n        \u003cNavLink to={match.url}\u003e{breadcrumb}\u003c/NavLink\u003e\n      \u003c/span\u003e\n    ))}\n  \u003c/div\u003e\n);\n\nexport default withBreadcrumbs(routes)(Breadcrumbs);\n```\n\nFor the above example...\n\nPathname | Result\n--- | ---\n/users | Home / Users\n/users/1 | Home / Users / John\n/example | Home / Custom Example\n\n## [Route config](https://reacttraining.com/react-router/web/example/route-config) compatibility\n\nAdd breadcrumbs to your existing [route config](https://reacttraining.com/react-router/web/example/route-config). This is a great way to keep all routing config paths in a single place! If a path ever changes, you'll only have to change it in your main route config rather than maintaining a _separate_ config for `react-router-breadcrumbs-hoc`.\n\nFor example...\n\n```js\nconst routeConfig = [\n  {\n    path: \"/sandwiches\",\n    component: Sandwiches\n  }\n];\n```\n\nbecomes...\n\n```js\nconst routeConfig = [\n  {\n    path: \"/sandwiches\",\n    component: Sandwiches,\n    breadcrumb: 'I love sandwiches'\n  }\n];\n```\n\nthen you can just pass the whole route config right into the hook:\n\n```js\nwithBreadcrumbs(routeConfig)(MyComponent);\n```\n\n## Dynamic breadcrumbs\n\nIf you pass a component as the `breadcrumb` prop it will be injected with react-router's [match](https://reacttraining.com/react-router/web/api/match) and [location](https://reacttraining.com/react-router/web/api/location) objects as props. These objects contain ids, hashes, queries, etc from the route that will allow you to map back to whatever you want to display in the breadcrumb.\n\nLet's use Redux as an example with the [match](https://reacttraining.com/react-router/web/api/match) object:\n\n```js\n// UserBreadcrumb.jsx\nconst PureUserBreadcrumb = ({ firstName }) =\u003e \u003cspan\u003e{firstName}\u003c/span\u003e;\n\n// find the user in the store with the `id` from the route\nconst mapStateToProps = (state, props) =\u003e ({\n  firstName: state.userReducer.usersById[props.match.params.id].firstName,\n});\n\nexport default connect(mapStateToProps)(PureUserBreadcrumb);\n\n// routes = [{ path: '/users/:id', breadcrumb: UserBreadcrumb }]\n// example.com/users/123 --\u003e Home / Users / John\n```\n\nNow we can pass this custom `redux` breadcrumb into the HOC:\n\n```js\nwithBreadcrumbs([{\n  path: '/users/:id',\n  breadcrumb: UserBreadcrumb\n}]);\n```\n\n----\n\nSimilarly, the [location](https://reacttraining.com/react-router/web/api/location) object could be useful for displaying dynamic breadcrumbs based on the route's state:\n\n```jsx\n// dynamically update EditorBreadcrumb based on state info\nconst EditorBreadcrumb = ({ location: { state: { isNew } } }) =\u003e (\n  \u003cspan\u003e{isNew ? 'Add New' : 'Update'}\u003c/span\u003e\n);\n\n// routes = [{ path: '/editor', breadcrumb: EditorBreadcrumb }]\n\n// upon navigation, breadcrumb will display: Update\n\u003cLink to={{ pathname: '/editor' }}\u003eEdit\u003c/Link\u003e\n\n// upon navigation, breadcrumb will display: Add New\n\u003cLink to={{ pathname: '/editor', state: { isNew: true } }}\u003eAdd\u003c/Link\u003e\n```\n\n## Options\n\nAn options object can be passed as the 2nd argument to the hook.\n\n```js\nwithBreadcrumbs(routes, options)(Component);\n```\n\nOption | Type | Description\n--- | --- | ---\n`disableDefaults` | `Boolean` | Disables all default generated breadcrumbs. |\n`excludePaths` | `Array\u003cString\u003e` | Disables default generated breadcrumbs for specific paths. |\n\n### Disabling default generated breadcrumbs\n\nThis package will attempt to create breadcrumbs for you based on the route section. For example `/users` will automatically create the breadcrumb `\"Users\"`. There are two ways to disable default breadcrumbs for a path:\n\n**Option 1:** Disable _all_ default breadcrumb generation by passing `disableDefaults: true` in the `options` object\n\n`withBreadcrumbs(routes, { disableDefaults: true })`\n\n**Option 2:** Disable _individual_ default breadcrumbs by passing `breadcrumb: null` in route config:\n\n`{ path: '/a/b', breadcrumb: null }`\n\n**Option 3:** Disable _individual_ default breadcrumbs by passing an `excludePaths` array in the `options` object\n\n`withBreadcrumbs(routes, { excludePaths: ['/', '/no-breadcrumb/for-this-route'] })`\n\n## Order matters!\n\nConsider the following route configs:\n\n```js\n[\n  { path: '/users/:id', breadcrumb: 'id-breadcrumb' },\n  { path: '/users/create', breadcrumb: 'create-breadcrumb' },\n]\n\n// example.com/users/create = 'id-breadcrumb' (because path: '/users/:id' will match first)\n// example.com/users/123 = 'id-breadcumb'\n```\n\nTo fix the issue above, just adjust the order of your routes:\n\n```js\n[\n  { path: '/users/create', breadcrumb: 'create-breadcrumb' },\n  { path: '/users/:id', breadcrumb: 'id-breadcrumb' },\n]\n\n// example.com/users/create = 'create-breadcrumb' (because path: '/users/create' will match first)\n// example.com/users/123 = 'id-breadcrumb'\n```\n\n## API\n\n```js\nRoute = {\n  path: String\n  breadcrumb?: String|Component // if not provided, a default breadcrumb will be returned\n  matchOptions?: {             // see: https://reacttraining.com/react-router/web/api/matchPath\n    exact?: Boolean,\n    strict?: Boolean,\n  }\n}\n\nOptions = {\n  excludePaths?: string[]       // disable default breadcrumb generation for specific paths\n  disableDefaults?: Boolean  // disable all default breadcrumb generation\n}\n\n// if routes are not passed, default breadcrumbs will be returned\nwithBreadcrumbs(routes?: Route[], options?: Options): HigherOrderComponent\n\n// you shouldn't ever really have to use `getBreadcrumbs`, but it's\n// exported for convenience if you don't want to use the HOC\ngetBreadcrumbs({\n  routes: Route[],\n  options: Options,\n}): Breadcrumb[]\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ficd2k3%2Freact-router-breadcrumbs-hoc","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ficd2k3%2Freact-router-breadcrumbs-hoc","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ficd2k3%2Freact-router-breadcrumbs-hoc/lists"}