react-router-dom 与 material-ui

Question

我在我的 react (typescript) 应用程序中使用 material-ui 和 react-router-dom

我尝试使用以下提示/帮助，以便当用户单击按钮（或其他任何内容）时，他会被重定向到该路线。很基础的东西。当我单击该按钮时，URL 会在浏览器的 url 窗口中更新，但未加载正确的组件。我使用引导程序（和'react-router-bootstrap's NavigationLink）进行了这项工作，但现在我卡住了。任何提示如何使其正常工作

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

https://material-ui.com/demos/buttons/ 和 How to make a Material UI react Button act as a react-router-dom Link?

请注意，如果我在 url 窗口中按 Enter 键，我会正确路由（到正确的组件）

Answer 1

我正在使用这种方法为来自 material-ui 的Button 组件实现正确的 react-router-dom 链接。

定义一个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>

如果您不想为此创建专用组件，可以将其用作 lambda 函数作为 <Button> 的组件道具。