React Router useHistory для программной навигации по маршрутам

Question

Я пытаюсь создать мастера и у меня возникли небольшие проблемы с кнопками. На данный момент я выбрал кнопки «Вперед» и «Назад» для каждого отдельного маршрута, но я хочу создать компонент кнопки, который знает, как перемещаться назад и вперед в компоненте Маршрутизатор. На данный момент кнопки выглядят так:

<Button
    variant="outlined"
    color="secondary"
    component={Link}
    to="/signup/basicMet"
>
  Next
</Button>

Answer 1

Попробуй это. Используйте history.goBack() и history.goForward().

import { useHistory } from "react-router-dom";

function Button({
    variant,
    color,
    component,
    action,
    ...props
}) {

    const history = useHistory();

    function handleClick() {
        if(action === 'GOBACK') {
            history.goBack()
        } else {
            history.goForward()
        }
    }

    return (
        <button
            onClick={handleClick}
        >
        {props.children}
        </button>
    );
}

<Button
    variant="outlined"
    color="secondary"
    action="GOBACK"
>
  Next
</Button>