Security News
Supply Chain Attack Detected in Solana's web3.js Library
A supply chain attack has been detected in versions 1.95.6 and 1.95.7 of the popular @solana/web3.js library.
react-router-breadcrumbs-hoc
Advanced tools
small, flexible, higher order component for rendering breadcrumbs with react-router 4.x
A small (~1.3kb compressed & gzipped), flexible, higher order component for rendering breadcrumbs with react-router 5
example.com/user/123 → Home / User / John Doe
Want to use hooks instead? Try use-react-router-breadcrumbs.
Render breadcrumbs for react-router
however you want!
yarn add react-router-breadcrumbs-hoc
or
npm i react-router-breadcrumbs-hoc --save
withBreadcrumbs()(MyComponent);
Start seeing generated breadcrumbs right away with this simple example (codesandbox)
import withBreadcrumbs from 'react-router-breadcrumbs-hoc';
const Breadcrumbs = ({ breadcrumbs }) => (
<>
{breadcrumbs.map(({ breadcrumb }) => breadcrumb)}
</>
)
export default withBreadcrumbs()(Breadcrumbs);
The 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)
import withBreadcrumbs from 'react-router-breadcrumbs-hoc';
const userNamesById = { '1': 'John' }
const DynamicUserBreadcrumb = ({ match }) => (
<span>{userNamesById[match.params.userId]}</span>
);
// define custom breadcrumbs for certain routes.
// breadcumbs can be components or strings.
const routes = [
{ path: '/users/:userId', breadcrumb: DynamicUserBreadcrumb },
{ path: '/example', breadcrumb: 'Custom Example' },
];
// map, render, and wrap your breadcrumb components however you want.
const Breadcrumbs = ({ breadcrumbs }) => (
<div>
{breadcrumbs.map(({
match,
breadcrumb
}) => (
<span key={match.url}>
<NavLink to={match.url}>{breadcrumb}</NavLink>
</span>
))}
</div>
);
export default withBreadcrumbs(routes)(Breadcrumbs);
For the above example...
Pathname | Result |
---|---|
/users | Home / Users |
/users/1 | Home / Users / John |
/example | Home / Custom Example |
Add breadcrumbs to your existing 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
.
For example...
const routeConfig = [
{
path: "/sandwiches",
component: Sandwiches
}
];
becomes...
const routeConfig = [
{
path: "/sandwiches",
component: Sandwiches,
breadcrumb: 'I love sandwiches'
}
];
then you can just pass the whole route config right into the hook:
withBreadcrumbs(routeConfig)(MyComponent);
If you pass a component as the breadcrumb
prop it will be injected with react-router's match and 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.
Let's use Redux as an example with the match object:
// UserBreadcrumb.jsx
const PureUserBreadcrumb = ({ firstName }) => <span>{firstName}</span>;
// find the user in the store with the `id` from the route
const mapStateToProps = (state, props) => ({
firstName: state.userReducer.usersById[props.match.params.id].firstName,
});
export default connect(mapStateToProps)(PureUserBreadcrumb);
// routes = [{ path: '/users/:id', breadcrumb: UserBreadcrumb }]
// example.com/users/123 --> Home / Users / John
Now we can pass this custom redux
breadcrumb into the HOC:
withBreadcrumbs([{
path: '/users/:id',
breadcrumb: UserBreadcrumb
}]);
Similarly, the location object could be useful for displaying dynamic breadcrumbs based on the route's state:
// dynamically update EditorBreadcrumb based on state info
const EditorBreadcrumb = ({ location: { state: { isNew } } }) => (
<span>{isNew ? 'Add New' : 'Update'}</span>
);
// routes = [{ path: '/editor', breadcrumb: EditorBreadcrumb }]
// upon navigation, breadcrumb will display: Update
<Link to={{ pathname: '/editor' }}>Edit</Link>
// upon navigation, breadcrumb will display: Add New
<Link to={{ pathname: '/editor', state: { isNew: true } }}>Add</Link>
An options object can be passed as the 2nd argument to the hook.
withBreadcrumbs(routes, options)(Component);
Option | Type | Description |
---|---|---|
disableDefaults | Boolean | Disables all default generated breadcrumbs. |
excludePaths | Array<String> | Disables default generated breadcrumbs for specific paths. |
This 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:
Option 1: Disable all default breadcrumb generation by passing disableDefaults: true
in the options
object
withBreadcrumbs(routes, { disableDefaults: true })
Option 2: Disable individual default breadcrumbs by passing breadcrumb: null
in route config:
{ path: '/a/b', breadcrumb: null }
Option 3: Disable individual default breadcrumbs by passing an excludePaths
array in the options
object
withBreadcrumbs(routes, { excludePaths: ['/', '/no-breadcrumb/for-this-route'] })
Consider the following route configs:
[
{ path: '/users/:id', breadcrumb: 'id-breadcrumb' },
{ path: '/users/create', breadcrumb: 'create-breadcrumb' },
]
// example.com/users/create = 'id-breadcrumb' (because path: '/users/:id' will match first)
// example.com/users/123 = 'id-breadcumb'
To fix the issue above, just adjust the order of your routes:
[
{ path: '/users/create', breadcrumb: 'create-breadcrumb' },
{ path: '/users/:id', breadcrumb: 'id-breadcrumb' },
]
// example.com/users/create = 'create-breadcrumb' (because path: '/users/create' will match first)
// example.com/users/123 = 'id-breadcrumb'
Route = {
path: String
breadcrumb?: String|Component // if not provided, a default breadcrumb will be returned
matchOptions?: { // see: https://reacttraining.com/react-router/web/api/matchPath
exact?: Boolean,
strict?: Boolean,
}
}
Options = {
excludePaths?: string[] // disable default breadcrumb generation for specific paths
disableDefaults?: Boolean // disable all default breadcrumb generation
}
// if routes are not passed, default breadcrumbs will be returned
withBreadcrumbs(routes?: Route[], options?: Options): HigherOrderComponent
// you shouldn't ever really have to use `getBreadcrumbs`, but it's
// exported for convenience if you don't want to use the HOC
getBreadcrumbs({
routes: Route[],
options: Options,
}): Breadcrumb[]
FAQs
small, flexible, higher order component for rendering breadcrumbs with react-router 4.x
The npm package react-router-breadcrumbs-hoc receives a total of 12,960 weekly downloads. As such, react-router-breadcrumbs-hoc popularity was classified as popular.
We found that react-router-breadcrumbs-hoc demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
A supply chain attack has been detected in versions 1.95.6 and 1.95.7 of the popular @solana/web3.js library.
Research
Security News
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.