Как сделать так, чтобы кнопка реагирования пользовательского интерфейса материала действовала как ссылка response-router-dom?
Как я могу заставить Материал UI реагировать на компонент Button, действуя как компонент Link из реагировать-маршрутизатор-дом, не теряя при этом его оригинальный стиль? Как и изменение маршрута по клику.
import Button from '@material-ui/core/Button';
<Button variant = "contained" color = "primary">
About Page
</Button>
Примерно так, но с сохранением оригинального стиля Button:
import Button from '@material-ui/core/Button';
import { Link } from 'react-router-dom';
<Button variant = "contained" color = "primary">
<Link to = "/about">
About Page
</Link>
</Button>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Хорошо, это очень просто, я не знаю, почему у меня не получилось:
Просто сделай так:
import Button from '@material-ui/core/Button';
import { Link } from 'react-router-dom';
<Button component = {Link} to = "/about" variant = "contained" color = "primary">
About Page
</Button>
Вы можете найти более подробную информацию на https://next.material-ui.com/guides/routing/.
как указать еще атрибут типа exact для Link?
Это выходит за рамки этого вопроса, но как бы сделать это динамичным? Скажем, я не передаю ссылку, не использую component = { Link }
Вам нужно обернуть <Button /> внутри компонента <Link />.
import Button from '@material-ui/core/Button';
import { Link } from 'react-router-dom';
const ButtonWithLink = () => (
<Link to = "/about">
<Button variant = "contained" color = "primary">
About Page
</Button>
</Link>
)
этот способ тоже работает. просто нужно придать стилю убрать подчеркивание с Link. Спасибо
Это было чрезвычайно полезно для проблемы, с которой я столкнулся, когда у меня есть оболочка для Link, и поэтому метод component = {Link} по какой-то причине привел к потере стиля из Material-UI. Этот метод восстановил укладку.
Возможный дубликат Material-ui добавляет компонент Link из React-Router