React Material UI +路由器重定向按钮

Question

我正在尝试将Material-UI用于React，但是我不确定重定向到其他页面/组件的正确方法。

我已经阅读了一些有关使用react-router-dom进行重定向的不同方法的站点，但仍然没有“最终”方法。

history.push：

不适用于我的方法之一是使用props.history.push('/some-route')。我知道history是不确定的。我还尝试通过props.history访问它：

import React, { Fragment } from 'react';
import { Button } from '@material-ui/core';

const Page = props => {
    const { history } = props;

    return (
        <Fragment>
            <Button
                variant="contained"
                color="primary"
                size="large"
                onClick={() => history.push('/some-route')}
            >My Button</Button>
        </Fragment>
    );
};

export default Page;

重定向组件

另一种对我不起作用的方法是使用相同的react-router-dom重定向组件。在这里我没有收到任何错误，单击时它什么也没做：

import React, { Fragment } from 'react';
import { Button } from '@material-ui/core';
import { Redirect } from 'react-router-dom';

const Page = props => {
    const { history } = props;

    return (
        <Fragment>
            <Button
                variant="contained"
                color="primary"
                size="large"
                onClick={() => <Redirect to={'/some-route'} />}
            >My Button</Button>
        </Fragment>
    );
};

export default Page;

具有样式的链接

我发现粘贴react-router-dom链接组件的唯一方法是粘贴相同的生成类名称：

import React, { Fragment } from 'react';
import { Link } from 'react-router-dom';

const Page = props => {
    return (
        <Fragment>
            <Link
                class="MuiButtonBase-root-124 MuiButton-root-98 MuiButton-contained-109 MuiButton-containedPrimary-110 MuiButton-raised-112 MuiButton-raisedPrimary-113 MuiButton-sizeLarge-122"
                to="/some-route"
            >My Button</Button>
        </Link>
    );
};

export default Page;

由于我猜错了，我什至没有尝试的最后一个方法是在Link组件内插入一个Button组件（反之亦然）。

在单击按钮时，您建议采用哪种方式重定向？任何评论表示赞赏。

Answer 1

更简单的方法是将react-router-dom Link传递到Material UI按钮的component属性：

    import React, { useState } from 'react';
    import { Link } from 'react-router-dom';
    import Button from '@material-ui/core/Button';

    ...

    <Button component={Link} to="/some-route" color="primary">
      MyButton
    </Button>

    // OR

    const MyLink = props => <Link to="/some-route" {...props} />

    <Button component={MyLink} color="primary">
      MyButton
    </Button>

材质UI示例：https://material-ui.com/demos/buttons/#third-party-routing-library

Answer 2

对于那些使用 Fraction 的解决方案但遇到错误 Error: Invariant failed: You should not use <Link> outside a <Router> 的人，解决方案是将使用的任何自定义元素 Link 包装在 BrowserRouter 中，例如

// App.js

...

<BrowserRouter>
   CustomElement
</BrowserRouter>

//CustomElement.js

...

return (
    <Button component={Link} to="/some-route" color="primary">
      MyButton
    </Button>
)