-
Notifications
You must be signed in to change notification settings - Fork 23
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Compatibility with declarative Routes #46
Comments
You can not pass a <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 |
got a pr for this coming in 👍 |
Thanks to @MichaelDimmitt this should now be compatible as of |
I have pulled in
Possibly because I'm using TypeScript as well? EDIT: Although this is easy to fix by using |
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. I can make a pr for this so that use-react-router-breadcrumbs will export Route instead of react-router
|
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 >
)
}; |
made a pr containing the first solution the pr has an update on the type that I think is more correct using the intersection instead of the union. 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 } |
@MichaelDimmitt @Kallb123 - see if @MichaelDimmitt made an update to the readme to use the newly extended Route component that accepts breadcrumb props. |
Hi, this solution worked for me for generating the routes with breadcrumbs, but I'm not able to pass custom props. Type '{ path: string; breadcrumb: any; element: Element; props: any; }' is not assignable to type 'IntrinsicAttributes & (PathRouteProps | LayoutRouteProps | (IndexRouteProps & BreadCrumb))'. |
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!
The text was updated successfully, but these errors were encountered: