Тип компонента Link, переданного в качестве компонента 'prop'

Question

У меня есть функциональный компонент (с TypeScript), скажем, он называется Button. Я импортирую Button как BaseButton из Material-UI, стилизую его, добавляю несколько интересных фрагментов (здесь я удалил ненужный код) и экспортирую его как свою собственную Button. Позже, когда я использую эту экспортированную кнопку где-то в коде и захочу передать компоненту Link (импортированному из Reaction-router-dom) в качестве «компонентной» опоры для этой кнопки. Какой тип я должен использовать в интерфейсе ButtonProps? Кроме того, следует ли указывать «to» в виде строки?

component/button.tsx

import * as React from 'react';
import { Button as BaseButton } from '@material-ui/core';

interface ButtonProps {
  component: ???;
  to: string;
}

export const Button: React.FC<ButtonProps> = ({ component, to }) => (
  <BaseButton component={component} to={to} />
)

.

some other place

import { Button } from 'components/button';
import { Link } from 'react-router-dom';

(...)
  <Button component={Link} to={'/'} />
(...)

Answer 1

Теги не являются визуальными компонентами, а являются обертками, созданными для добавления функциональных возможностей навигации. Материал-пользовательский интерфейс предназначен для противоположного использования, поэтому что-то вроде этого должно перемещаться

---

    export const Button: React.FC<ButtonProps> = ({ to }) => 
      <Link to={to}
        <BaseButton /> // your own styled compnent
      </Link>
     )

---