Реагировать-маршрутизатор-дом с материалом-интерфейсом
Я использую material-ui и react-router-dom в своем реагирующем (машинописном) приложении.
Я попытался использовать следующий совет/помощь, чтобы, когда пользователь нажимал кнопку (или что-то еще), он перенаправлялся на этот маршрут. Очень простые вещи. Когда я нажимаю на кнопку, URL-адрес обновляется в окне URL-адреса в моем браузере, но правильный компонент не загружается. У меня это работало с использованием бутстрапа (и навигационной ссылки «реагирующего маршрутизатора-бутстрапа»), но теперь я застрял. Любые советы, как заставить это работать
(Я также использую Mobx в качестве обработчика состояния), я также доволен любым другим маршрутизатором, если это делает мою жизнь проще.
https://material-ui.com/demos/buttons/ и Как заставить реагирующую кнопку Material UI действовать как ссылку react-router-dom?
Обратите внимание, что если я нажму Enter в окне URL-адреса, я правильно перенаправлюсь (к правому компоненту)
Ответы 1
Я использую этот метод для получения правильной ссылки на react-router-dom для компонента Button из material-ui.
Определите LinkComponent
import * as React from 'react';
import { Link } from 'react-router-dom';
export const LinkComponent = (props: any) => {
return <Link {...props} />;
};
Затем вы можете использовать его следующим образом:
<Button
variant = {'outlined'}
color = {'primary'}
component = {LinkComponent}
to = {'/'}>
HomePage
</Button>
Если вы не хотите создавать специальный компонент для этой цели, вы можете использовать его как лямбда-функцию в качестве реквизита компонента для <Button>.
... но я не могу найти здесь атрибут to материал-ui.com/api/кнопка
... и даже если я жестко запрограммирую <Link to='/hardcodedurl', все будет по-прежнему. URL-адрес, который я обновил, но мои компоненты не загружены...
@Cowborg Извините за ошибку href not found, я обновил ответ, попробуйте сейчас.
тоже пробовал, разницы нет. Я думаю, что моя проблема в том, как я подключаю маршрутизацию с помощью mobx. Раньше я использовал react-router-bootstrap, но, поскольку теперь я не использую bootstrap, мне нужно еще раз просмотреть это... я думаю
Привет, Аммар! Спасибо за ответ. Я получаю 2 ошибки здесь, может быть, я неправильно вас понимаю. Я создал LinkComponent, но получаю сообщение об ошибке «(TS) не смог найти имя href», поэтому я удалил часть «href ||». В части <Button я получаю, что не существует (также ошибка TS)