File tree Expand file tree Collapse file tree 1 file changed +6
-0
lines changed
Expand file tree Collapse file tree 1 file changed +6
-0
lines changed Original file line number Diff line number Diff line change @@ -96,11 +96,16 @@ const DynamicUserBreadcrumb = ({ match }) => (
9696 < span> {userNamesById[match .params .userId ]}< / span>
9797);
9898
99+ const CustomPropsBreadcrumb = ({ someProp }) => (
100+ < span> {someProp}< / span>
101+ );
102+
99103// define custom breadcrumbs for certain routes.
100104// breadcumbs can be components or strings.
101105const routes = [
102106 { path: ' /users/:userId' , breadcrumb: DynamicUserBreadcrumb },
103107 { path: ' /example' , breadcrumb: ' Custom Example' },
108+ { path: ' /custom-props, breadcrumb: CustomPropsBreadcrumb, props: { someProp: ' Hi' }},
104109];
105110
106111// map & render your breadcrumb components however you want.
@@ -129,6 +134,7 @@ Pathname | Result
129134/users | Home / Users
130135/users/1 | Home / Users / John
131136/example | Home / Custom Example
137+ /custom-props | Home / Hi
132138
133139## [Route object](https://reactrouter.com/docs/en/v6/examples/route-objects) compatibility
134140
You can’t perform that action at this time.
0 commit comments