react-router-dom with material-ui

Question

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

我尝试使用以下提示/帮助，以便当用户单击按钮(或其他任何按钮)时，他会被重定向到该路由。非常基本的东西。当我点击按钮时，浏览器中的url窗口中的url会更新，但不会加载正确的组件。我曾经使用bootstrap (和'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-window中按回车键，我会被正确路由(到右侧组件)

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>

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