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 Redirect. Здесь я не получаю никакой ошибки, он просто ничего не делает при нажатии:

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;

И последнее, что я даже не попробовал, так как считаю, что это неправильно, - это вставка компонента Button внутри компонента Link (или наоборот).

Каким способом вы рекомендуете перенаправлять при нажатии кнопки? Любые комментарии приветствуются.

Answer 1

Более простой способ - передать response-router-dom Link в свойство component кнопки Material UI:

    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>

Пример пользовательского интерфейса материала: https://material -ui.com / demos / buttons / # сторонняя библиотека маршрутизации