Reactjs 如何制作一个自定义按钮，从redux状态获取URL，并像history.goBack方法那样返回这些URL？

问题是：我有一个明确的任务来创建一个自定义按钮，该按钮不使用浏览器本机返回按钮，相反，我需要在组件中创建一个自定义按钮，并将浏览的URL存储到redux状态，并使用这些存储的URL创建一个按钮，onClick将像history一样返回。goBack会这样做，但在这种情况下，此方法不是一个简单的方法选项我只设法将url存储到state，并单击onClick从state中删除上次浏览的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;
    };
};