diff --git a/package.json b/package.json
index 2415075..37c1964 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "use-react-router-breadcrumbs",
- "version": "3.2.1",
+ "version": "4.0.0",
"description": "A hook for displaying and setting breadcrumbs for react router",
"main": "dist/cjs/index.js",
"module": "dist/es/index.js",
@@ -11,7 +11,7 @@
"types": "dist/index.d.ts",
"peerDependencies": {
"react": ">=16.8",
- "react-router": ">=6.0.0"
+ "react-router-dom": ">=6.0.0"
},
"scripts": {
"prepublishOnly": "yarn build && pinst --disable",
@@ -55,7 +55,7 @@
"pinst": "^3.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
- "react-router": "^6.3.0",
+ "react-router-dom": "^6.3.0",
"rollup": "^2.79.0",
"rollup-plugin-size": "^0.2.2",
"rollup-plugin-terser": "^7.0.2",
diff --git a/rollup.config.js b/rollup.config.js
index bc71aa6..5645e1d 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -27,7 +27,7 @@ const formats = [
const globals = {
react: 'React',
- 'react-router': 'ReactRouter',
+ 'react-router-dom': 'ReactRouterDom',
};
export default formats.map(({ plugins, file, format }) => ({
diff --git a/src/index.test.tsx b/src/index.test.tsx
index 44b69ac..d79e1eb 100644
--- a/src/index.test.tsx
+++ b/src/index.test.tsx
@@ -3,8 +3,8 @@
import '@testing-library/jest-dom';
import React from 'react';
import { render, screen } from '@testing-library/react';
-import { MemoryRouter as Router, useLocation } from 'react-router';
-import useBreadcrumbs, { getBreadcrumbs, createRoutesFromChildren, BreadcrumbsRoute, Route, Options } from './index';
+import { MemoryRouter as Router, useLocation } from 'react-router-dom';
+import useBreadcrumbs, { getBreadcrumbs, createRoutesFromChildren, BreadcrumbsRoute, Route, Options, BreadcrumbComponentProps } from './index';
// imports to test compiled builds
import useBreadcrumbsCompiledES, {
@@ -19,6 +19,11 @@ import useBreadcrumbsCompiledCJS, {
getBreadcrumbs as getBreadcrumbsCompiledCJS,
} from '../dist/cjs/index';
+interface ExtraPropsTest extends BreadcrumbComponentProps {
+ foo?: string;
+ bar?: string;
+}
+
const components = {
Breadcrumbs: ({
useBreadcrumbs: useBreadcrumbsHook,
@@ -69,23 +74,23 @@ const components = {
BreadcrumbLocationTest: ({
location,
- }: {
- location?: {
- state?: { isLocationTest?: boolean }
- }
- }) => {location?.state?.isLocationTest ? 'pass' : 'fail'},
+ }: BreadcrumbComponentProps) => (
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+ // @ts-ignore
+ {location?.state?.isLocationTest ? 'pass' : 'fail'}
+ ),
- BreadcrumbExtraPropsTest: ({ foo, bar }: { foo: string, bar: string }) => (
-
- {foo}
- {bar}
-
+ BreadcrumbExtraPropsTest: (props: ExtraPropsTest) => (
+ <>
+ {props.foo}
+ {props.bar}
+ >
),
BreadcrumbMemoized: React.memo(() => Memoized),
// eslint-disable-next-line react/prefer-stateless-function
- BreadcrumbClass: class BreadcrumbClass extends React.PureComponent {
+ BreadcrumbClass: class BreadcrumbClass extends React.PureComponent {
render() {
return Class;
}
@@ -457,6 +462,8 @@ describe('use-react-router-breadcrumbs', () => {
},
];
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+ // @ts-ignore arbitrary prop is not expected, but should not error
renderer({ pathname: '/one', routes });
expect(getByTextContent('Home / foobar')).toBeTruthy();
});
diff --git a/src/index.tsx b/src/index.tsx
index b974a20..d154b70 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -23,15 +23,23 @@ import {
useLocation,
RouteObject,
Params,
- PathPattern,
Route,
PathRouteProps,
LayoutRouteProps,
IndexRouteProps,
-} from 'react-router';
+} from 'react-router-dom';
type Location = ReturnType;
+/**
+ * This type interface is copied in directly from react-router (react-router-dom does not export it)
+ */
+interface PathPattern {
+ path: Path;
+ caseSensitive?: boolean;
+ end?: boolean;
+}
+
export interface Options {
disableDefaults?: boolean;
excludePaths?: string[];
@@ -61,6 +69,7 @@ export interface BreadcrumbComponentProps {
key: string;
match: BreadcrumbMatch;
location: Location;
+ [x: string]: unknown;
}
export type BreadcrumbComponentType =
diff --git a/yarn.lock b/yarn.lock
index 3c51a59..de0cf7c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6897,7 +6897,20 @@ __metadata:
languageName: node
linkType: hard
-"react-router@npm:^6.3.0":
+"react-router-dom@npm:^6.3.0":
+ version: 6.3.0
+ resolution: "react-router-dom@npm:6.3.0"
+ dependencies:
+ history: ^5.2.0
+ react-router: 6.3.0
+ peerDependencies:
+ react: ">=16.8"
+ react-dom: ">=16.8"
+ checksum: 77603a654f8a8dc7f65535a2e5917a65f8d9ffcb06546d28dd297e52adcc4b8a84377e0115f48dca330b080af2da3e78f29d590c89307094d36927d2b1751ec3
+ languageName: node
+ linkType: hard
+
+"react-router@npm:6.3.0":
version: 6.3.0
resolution: "react-router@npm:6.3.0"
dependencies:
@@ -8116,14 +8129,14 @@ __metadata:
pinst: ^3.0.0
react: ^18.2.0
react-dom: ^18.2.0
- react-router: ^6.3.0
+ react-router-dom: ^6.3.0
rollup: ^2.79.0
rollup-plugin-size: ^0.2.2
rollup-plugin-terser: ^7.0.2
typescript: ^4.8.3
peerDependencies:
react: ">=16.8"
- react-router: ">=6.0.0"
+ react-router-dom: ">=6.0.0"
languageName: unknown
linkType: soft