Как сделать пользовательскую кнопку, которая будет принимать URL-адреса из состояния избыточности и возвращаться назад, принимая эти URL-адреса, как метод history.goBack? - PullRequest
Новая
       5

Как сделать пользовательскую кнопку, которая будет принимать URL-адреса из состояния избыточности и возвращаться назад, принимая эти URL-адреса, как метод history.goBack?

1 голос
/ 14 января 2020

Проблема: у меня есть явное назначение для создания пользовательской кнопки, которая не использует встроенную кнопку браузера go, и вместо этого мне нужно сделать ее внутри компонента и сохранить просмотренные URL-адреса в состоянии редукции и использовать эти сохраненные URL-адреса для кнопка, которая onClick будет go возвращать так же, как history.goBack, но в этом случае этот метод не вариант. Мне удалось только сохранить URL-адреса для состояния и onClick, чтобы удалить последний просмотренный URL-адрес из состояния.

Вот некоторые фрагменты компонента: 

const PageComponent = props => {

    useEffect(() => {
        props.addUrl(props.history.location.pathname);
    }, [props.history.location.pathname]);

    return (
        <main>
            <div className="page">
                <div>
                    <h1>{props.history.location.pathname.split("/").pop().replace('-', ' ')}</h1>
                    <div className="underline bg-black"></div>
                </div>
                <button onClick={() => {
                    props.removeUrl();
                }}>BACK</button>

const mapDispatchToProps = dispatch => ({
    addUrl: url => dispatch({ type: 'ADD_URL', payload: url }),
    removeUrl: () => dispatch({ type: 'REMOVE_URL' })
});

Редуктор: 

export default (state = initialState, action) => {
    switch(action.type) {
        case 'ADD_URL':
            return {
                ...state,
                pages: state.pages.concat(action.payload)
            }
        case 'REMOVE_URL':
            const updatedUrls = state.pages.slice(0, -1)
            return {
                ...state,
                pages: updatedUrls
            }
        default: 
            return state;
    };
};
...