Question

我在我的react（打字稿）应用程序中使用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?

请注意，如果我在网址窗口中按回车键，则会正确路由到正确的组件

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>的组件道具。

用material-ui反应router-dom

1 个答案: