Material ui 将路由器dom与材质ui进行交互

我在我的react（typescript）应用程序中使用MaterialUI和react路由器dom

我尝试使用以下提示/帮助，这样当用户单击按钮（或其他）时，他会被重定向到该路线。非常基本的东西。当我单击按钮时，浏览器的url窗口中的url将更新，但未加载正确的组件。我使用引导（和“react router bootstrap的NavigationLink”）实现了这一点，但现在我被卡住了。有什么建议可以让它工作吗

（我也使用Mobx作为状态处理器），我也很乐意使用任何其他路由器，如果这能让我的生活更简单的话

和

---

请注意，如果我在url窗口中按enter键，我将正确路由（到右侧组件）

我正在使用此方法为材质ui中的

按钮

组件实现正确的react router dom链接

定义

LinkComponent

import * as React from 'react';
import { Link } from 'react-router-dom';

export const LinkComponent = (props: any) => {
  return <Link {...props} />;
};

import*as React from'React'；
从'react router dom'导入{Link}；
导出常量链接组件=（道具：任意）=>{
返回；
};

然后你可以这样使用它：

<Button
  variant={'outlined'}
  color={'primary'}
  component={LinkComponent}
  to={'/'}>
  HomePage
</Button>

主页

---

如果不想为此创建专用组件，可以将其用作lambda函数，作为

Hi-Ammar的组件道具！谢谢你的回复。我这里有两个错误，也许我误解了你。我创建了LinkComponent，但出现错误“（TS）找不到name href”，因此我删除了“href | |”部分。在…上，但我也找不到属性。。。即使我对href not found错误进行了硬编码@Cowborg，我也更新了答案，请立即尝试。也尝试了，没有区别。我想我的问题是如何用mobx连接路由。我以前用过react路由器引导程序，但由于我现在不使用引导程序，我需要再检查一遍。。。我想