/
githubmirror
/
material-ui
Обзор
Документация
Войти
/
githubmirror
/
material-ui
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
docs/data/material/integrations/routing/LinkRouterWithTheme.js
67 строк
2 KB
renovate[bot]
[docs] Bump React Router to ^7.0.1 (#44531)
02 дек 2024, 14:57
Не верифицирован
02 дек 2024, 14:57
1f3d69a
Код
Авторство
О чём код?
import * as React from 'react'; import PropTypes from 'prop-types'; import { Link as RouterLink, MemoryRouter, StaticRouter } from 'react-router'; import { ThemeProvider, createTheme } from '@mui/material/styles'; import Button from '@mui/material/Button'; import Stack from '@mui/material/Stack'; import Link from '@mui/material/Link'; const LinkBehavior = React.forwardRef((props, ref) => { const { href, ...other } = props; // Map href (MUI) -> to (react-router) return <RouterLink data-testid="custom-link" ref={ref} to={href} {...other} />; }); LinkBehavior.propTypes = { href: PropTypes.oneOfType([ PropTypes.shape({ hash: PropTypes.string, pathname: PropTypes.string, search: PropTypes.string, }), PropTypes.string, ]).isRequired, }; function Router(props) { const { children } = props; if (typeof window === 'undefined') { return <StaticRouter location="/">{children}</StaticRouter>; } return <MemoryRouter>{children}</MemoryRouter>; } Router.propTypes = { children: PropTypes.node, }; const theme = createTheme({ components: { MuiLink: { defaultProps: { component: LinkBehavior, }, }, MuiButtonBase: { defaultProps: { LinkComponent: LinkBehavior, }, }, }, }); export default function LinkRouterWithTheme() { return ( <Stack spacing={1} sx={{ alignItems: 'center', typography: 'body1' }}> <ThemeProvider theme={theme}> <Router> <Link href="/">Link</Link> <Button href="/" variant="contained"> Link </Button> </Router> </ThemeProvider> </Stack> ); }