在 SPA 中使用 React Router 来处理历史记录，包括按下浏览器后退按钮？答案

【问题标题】：Using React Router in a SPA to handle history, including browser back button press?在 SPA 中使用 React Router 来处理历史记录，包括按下浏览器后退按钮？
【发布时间】：2021-02-22 10:35:58
【问题描述】：

我试图找到一个相关的问题，但我一直没能找到。

在 SPA 中，单击浏览器的后退按钮不会将用户带到您应用的上一个视图 - 它会将您带到您之前访问过的任何网站。

我尝试过如下操作：

import React from 'react';
import { useDispatch } from 'react-redux';
import { useHistory } from 'react-router-dom';
import styled from 'styled-components';

const Part0 = ({ history }) => {
    React.useEffect(() => {
        return () => {
            if (history?.action === 'POP') {
                console.log('pop0');
                history.goBack();
            }
        };
    }, []);

    return <ComponentContainer>part0</ComponentContainer>;
};

const Part1 = ({ history }) => {
    React.useEffect(() => {
        return () => {
            if (history?.action === 'POP') {
                console.log('pop1');
                history.goBack();
            }
        };
    }, []);

    return <ComponentContainer>part1</ComponentContainer>;
};

export default function Component() {
    const [page, setPage] = React.useState(0);
    const history = useHistory();
    const dispatch = useDispatch()

    const handleBack = React.useCallback(() => {
        history.goBack();
    }, []);

    const handleForward = React.useCallback(() => {
        history.push('');
        setPage(page + 1);
    }, [page]);

    return (
        <Main>
            <ContentContainer>
                {page === 0 && <Part0 history={history} />}
                {page === 1 && <Part1 history={history} />}
                <ButtonContainer>
                    <Button onClick={handleBack}>back</Button>
                    <Button onClick={handleForward}>forward</Button>
                </ButtonContainer>
            </ContentContainer>
        </Main>
    );
}

const Main = styled.div`
    display: flex;
    align-items: center;
    justify-content: center;
`;

const ContentContainer = styled.div`
    height: 20vh;
`;

const ButtonContainer = styled.div`
    display: flex;
    justifyContent: space-between;
    alignItems: flex-end;
    height: 100%;
    width: 25vw;
`

const Button = styled.div`
    width: 8rem;
    cursor: pointer;
    height: 3rem;
    border: 1px solid gray;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.5rem;
    transition: 0.5s;

    &:hover {
        background-color: #f1f1f1;
    }
`;

const ComponentContainer = styled.div`
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
`;

当用户决定向前移动时，相关部分是history.push('');，当用户决定点击浏览器的后退按钮时，history.goBack()。

很遗憾，这不起作用。是否可以使用 React 处理用户在 SPA 中单击浏览器的后退按钮？

【问题讨论】：

您是否将您的路由封装在 BrowserRouter 中？据我了解，BrowerRouter 会根据历史对象中存在的路由信息自动处理后退和前进按钮。
是的，但是在 SPA 中，没有历史对象的操作，它只是基于用户交互的动态内容。

标签： javascript reactjs react-redux browser-history

【解决方案1】：

要回答您的问题，您可以像这样拦截后退按钮事件：

componentDidMount() {
    this.backListener = browserHistory.listen(location => {
      if (location.action === "POP") {
        // Do your stuff
      }
    });
  }

componentWillUnmount() {
    super.componentWillUnmount();
    // Unbind listener
    this.backListener();
}

正如here中的回答

【讨论】：