Compatibility with declarative Routes

[YousefED]

Is it possible to use https://github.com/icd2k3/use-react-router-breadcrumbs#advanced (the "breadcrumb" property") when using react-router and declarative, <Route> style routes?

Thanks!

[icd2k3]

You can not pass a breadcrumb prop into a Route component, but you can still define all the paths you're using and pass it into the breadcrumbs hook

<Route path="example" element={<Example />} />

// ...

useBreadcrumbs({ path: '/example', breadcrumb: 'Custom' });

This will work, but I'd recommend using route objects because you can add a custom breadcumb property and pass the same config into react-router and use-react-router-breadcumbs to keep everything in sync. That way, if your path /example ever changes to something else you don't have to edit 2 different places.

[MichaelDimmitt]

got a pr for this coming in 👍

[MichaelDimmitt]

you can track the change here
#49 @YousefED

the change I added works, and I just need to update readme.

[icd2k3]

Thanks to @MichaelDimmitt this should now be compatible as of 3.2.0 - please refer to the new section of the Readme https://github.com/icd2k3/use-react-router-breadcrumbs#advanced-declarative-routes

[Kallb123]

I have pulled in 3.2.0 but I don't seem to be able to add breadcrumbs to my Route elements. I get the error:

Property 'breadcrumb' does not exist on type 'IntrinsicAttributes & (PathRouteProps | LayoutRouteProps | IndexRouteProps)'.

Possibly because I'm using TypeScript as well?

EDIT: It's not just declarative routes I'm struggling with. Using RouteObjects also throws errors since a RouteObject doesn't have a breadcrumb property

Although this is easy to fix by using BreadcrumbsRoute instead of RouteObject

[MichaelDimmitt]

looks like you figured it out,

but one solution is to create a file that adds the type to Route from react-router

import React from 'react';
import { Route, PathRouteProps, LayoutRouteProps, IndexRouteProps } from 'react-router-dom';
type BreadCrumb = { breadcrumb: any }
type BreadCrumbRouteType = (_props: PathRouteProps | LayoutRouteProps | IndexRouteProps | BreadCrumb) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null
const BreadCrumbRoute: BreadCrumbRouteType = Route;

export { BreadCrumbRoute as Route }

then you import that Route instead.
import { Route } from '<your_project>/<filename>'

I can make a pr for this so that use-react-router-breadcrumbs will export Route instead of react-router

import { Route, BreadcrumbsRoute } from 'use-react-router-breadcrumbs';

[MichaelDimmitt]

The other solution is as you mentioned @Kallb123

and the change would be for me just to update the docs

const GenerateAppRoutes = () => {
  // Full declarative react router support. example: Element, children, Nested Routes
  return (
    <Route path='/users/:userId' breadcrumb={DynamicUserBreadcrumb} element={<ProfilePage/>} />
    <Route path='/example' breadcrumb='Custom Example' >
      <Route path='/' breadcrumb='Custom Example' >
        <ExamplePage/>
      </Route>
    </Route>
    <Route path='/custom-props' breadcrumb={CustomPropsBreadcrumb} props={ someProp: 'Hi' } >
      <CustomPage/>
    </Route>
  )
};

changes to

const GenerateAppRoutes = () => {
  // Full declarative react router support. example: Element, children, Nested Routes
  return (
    <BreadCrumbRoute path='/users/:userId' breadcrumb={DynamicUserBreadcrumb} element={<ProfilePage/>} />
    <BreadCrumbRoute path='/example' breadcrumb='Custom Example' >
      <BreadCrumbRoute path='/' breadcrumb='Custom Example' >
        <ExamplePage/>
      </BreadCrumbRoute >
    </BreadCrumbRoute >
    <BreadCrumbRoute path='/custom-props' breadcrumb={CustomPropsBreadcrumb} props={ someProp: 'Hi' } >
      <CustomPage/>
    </BreadCrumbRoute >
  )
};

[MichaelDimmitt]

made a pr containing the first solution
#51

@Kallb123

the pr has an update on the type that I think is more correct using the intersection instead of the union.
type BreadCrumb, not sure if breadcrumb should be what I put below or just type any. 🤷‍♂️

type BreadCrumb = { breadcrumb?: string | ((param: any) => JSX.Element) | JSX.Element | null }
type BreadCrumbRouteType = (_props: PathRouteProps | LayoutRouteProps | IndexRouteProps & BreadCrumb) => React.ReactElement | null
const BreadCrumbRoute: BreadCrumbRouteType = Route;

export { BreadCrumbRoute as Route }

[icd2k3]

@MichaelDimmitt @Kallb123 - see if 3.2.1 checks all the boxes for ya!

@MichaelDimmitt made an update to the readme to use the newly extended Route component that accepts breadcrumb props.