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

Posted 2023-02-21

【中文标题】React Material UI + 路由器重定向按钮

【英文标题】：React Material UI + Router redirect button

【发布时间】：2019-09-11 18:43:19

【问题描述】：

我正在尝试将 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 组件（反之亦然）。

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

【问题讨论】：

如果您的历史对象未定义，您检查过原因吗？ <Page /> 是否将其作为道具接收？

【参考方案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

【讨论】：

关于component 属性的文档：material-ui.com/guides/composition/#component-prop

【参考方案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>
)