👋 Thanks for using Material-UI!

We use GitHub issues exclusively as a bug and feature requests tracker, however,
this issue appears to be a support request.

For support, please check out https://material-ui.com/getting-started/support/. Thanks!

If you have a question on StackOverflow, you are welcome to link to it here, it might help others.
If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.

See https://material-ui.com/guides/composition/#routing-libraries, same approach

See https://material-ui.com/guides/composition/#routing-libraries, same approach

@oliviertassinari I tried but it doesn't work for BottomNavigationItem. It doesn't have a prop component.

@guoyunhe Look closer :)

I did read the entire page, word by word, for three times. But didn't get it. It will be really helpful if here is any working example.

What do you think about this diff?

diff --git a/docs/src/pages/guides/composition/composition.md b/docs/src/pages/guides/composition/composition.md
index 45a2bdc5d..ef24268b8 100644
--- a/docs/src/pages/guides/composition/composition.md
+++ b/docs/src/pages/guides/composition/composition.md
@@ -133,7 +133,7 @@ You can find the details in the [TypeScript guide](/guides/typescript/#usage-of-
 The integration with third-party routing libraries is achieved with the `component` prop.
 The behavior is identical to the description of the prop above.
 Here are a few demos with [react-router-dom](https://github.com/ReactTraining/react-router).
-It covers the Button, Link, and List components, you should be able to apply the same strategy with all the components.
+They cover the Button, Link, and List components. You should be able to apply the same strategy with all the components (BottomNavigation, Card, etc.).

 ### Button

Do you want to work on it?

I haven't included Tabs because we will get it covered in #18811

I actually want to add links to BottomNavigationAction items.

For example, I have:

<BottomNavigation>
  <BottomNavigationAction label="Home" icon={<HomeIcon/>} component={ReactRouterLink} to="/" />
  <BottomNavigationAction label="Posts" icon={<ListIcon/>} component={ReactRouterLink} to="/posts" />
  <BottomNavigationAction label="Profile" icon={<PersonIcon/>} component={ReactRouterLink} to="/profile" />
</BottomNavigation>

It is very weird that when I type component, VS Code doesn't give prop hints as when typing it on other components, like Button, IconButton. So it makes me think that BottomNavigationAction doesn't support component prop. I don't know why this happen and how to fix it.

It will be more clear if here is an example on https://material-ui.com/components/bottom-navigation/ because most navigations are URL based.

TypeScript component prop hints works for:

declare const BottomNavigation: OverridableComponent<BottomNavigationTypeMap>;
declare const Link: OverridableComponent<LinkTypeMap>;
declare const Divider: OverridableComponent<DividerTypeMap>;

not work for:

declare const BottomNavigationAction: ExtendButtonBase<BottomNavigationActionTypeMap<
  {},
  ButtonBaseTypeMap['defaultComponent']
>>;
declare const Tab: ExtendButtonBase<TabTypeMap>;
declare const Fab: ExtendButtonBase<FabTypeMap>;
declare const Button: ExtendButtonBase<ButtonTypeMap>;

So I guess TypeScript had some trouble to understand ExtendButtonBase and give hints of props.

I am using TypeScript 3.9.6.