Реакция-роутер-дом с материалом-интерфейсом

Question

Я использую material-ui и Reaction-router-dom в своем приложении «Реакция (машинопись)»

Я попытался использовать следующий совет / справку, чтобы при нажатии пользователем кнопки (или чего-либо еще)он перенаправлен на этот маршрут.Очень простые вещи.Когда я нажимаю на кнопку, URL-адрес обновляется в окне URL-адреса в моем браузере, но правильный компонент не загружается.У меня это работало с использованием начальной загрузки (и NavigationLink'ero-router-bootstrap's), но теперь я застрял.Любые советы, как заставить это работать

(я также использую Mobx в качестве обработчика состояний), я также доволен любым другим маршрутизатором, если это делает мою жизнь проще

https://material -ui.com/demos/buttons/ и Как заставить реагировать кнопку пользовательского интерфейса материала действовать как связь с маршрутизатором-домом?

Обратите внимание, что если я нажму, введите в полеurl-окно, которое я правильно маршрутизирую (к правому компоненту)

Answer 1

Я использую этот метод для получения правильной ссылки реакции-маршрутизатора-домена для компонента 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>.