From eec2e99557d09199c9d653bcc1bd9b9d1ec353e6 Mon Sep 17 00:00:00 2001
From: Andreas Richter <andreas.richter@incloud.de>
Date: Thu, 14 Apr 2022 21:22:09 +0200
Subject: [PATCH] docs(Link): fix typings in  react-router example. Fixes
 #32306

---
 docs/data/material/guides/routing/routing-pt.md | 10 ++++++++--
 docs/data/material/guides/routing/routing-zh.md | 10 ++++++++--
 docs/data/material/guides/routing/routing.md    | 10 ++++++++--
 3 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/docs/data/material/guides/routing/routing-pt.md b/docs/data/material/guides/routing/routing-pt.md
index 2e9790cfe1578b..a1c989ce314e89 100644
--- a/docs/data/material/guides/routing/routing-pt.md
+++ b/docs/data/material/guides/routing/routing-pt.md
@@ -16,7 +16,13 @@ Você também pode fazer com que um botão execute ações de navegação. For i
 
 Em aplicações da vida real, usar um elemento `<a>` nativo é raramente o suficiente. Você pode melhorar a experiência do usuário usando sistematicamente um componente Link aprimorado. For instance, with react-router: The theme of Material UI allows configuring this component once. For instance, with react-router:
 
-```jsx
+```tsx
+import {
+  Link as RouterLink,
+  LinkProps as RouterLinkProps,
+} from 'react-router-dom';
+import { LinkProps } from '@mui/material/Link';
+
 const LinkBehavior = React.forwardRef<
   any,
   Omit<RouterLinkProps, 'to'> & { href: RouterLinkProps['to'] }
@@ -31,7 +37,7 @@ const theme = createTheme({
     MuiLink: {
       defaultProps: {
         component: LinkBehavior,
-      },
+      } as LinkProps,
     },
     MuiButtonBase: {
       defaultProps: {
diff --git a/docs/data/material/guides/routing/routing-zh.md b/docs/data/material/guides/routing/routing-zh.md
index 1e18acdb162e76..fb7d09a6bcc927 100644
--- a/docs/data/material/guides/routing/routing-zh.md
+++ b/docs/data/material/guides/routing/routing-zh.md
@@ -16,7 +16,13 @@ You can also make a button perform navigation actions. You can also make a butto
 
 In real-life applications, using a native `<a>` element is rarely enough. element is rarely enough. You can improve the user experience by using an enhanced Link component systematically. The theme of Material UI allows configuring this component once. For instance, with react-router: The theme of MUI allows configuring this component once. For instance, with react-router:
 
-```jsx
+```tsx
+import {
+  Link as RouterLink,
+  LinkProps as RouterLinkProps,
+} from 'react-router-dom';
+import { LinkProps } from '@mui/material/Link';
+
 const LinkBehavior = React.forwardRef<
   any,
   Omit<RouterLinkProps, 'to'> & { href: RouterLinkProps['to'] }
@@ -31,7 +37,7 @@ const theme = createTheme({
     MuiLink: {
       defaultProps: {
         component: LinkBehavior,
-      },
+      } as LinkProps,
     },
     MuiButtonBase: {
       defaultProps: {
diff --git a/docs/data/material/guides/routing/routing.md b/docs/data/material/guides/routing/routing.md
index 5718b2cda3cefa..fb3f661ff804ad 100644
--- a/docs/data/material/guides/routing/routing.md
+++ b/docs/data/material/guides/routing/routing.md
@@ -23,7 +23,13 @@ You can improve the user experience by using an enhanced Link component systemat
 The theme of MUI allows configuring this component once.
 For instance, with react-router:
 
-```jsx
+```tsx
+import {
+  Link as RouterLink,
+  LinkProps as RouterLinkProps,
+} from 'react-router-dom';
+import { LinkProps } from '@mui/material/Link';
+
 const LinkBehavior = React.forwardRef<
   any,
   Omit<RouterLinkProps, 'to'> & { href: RouterLinkProps['to'] }
@@ -38,7 +44,7 @@ const theme = createTheme({
     MuiLink: {
       defaultProps: {
         component: LinkBehavior,
-      },
+      } as LinkProps,
     },
     MuiButtonBase: {
       defaultProps: {