React實現移動端導航欄返回事件邏輯

  一直糾結導航欄返回之後用戶如果按了手機上的物理返回鍵怎麼處理，原來用history就好了啊！

header.jsx中：

import React from 'react';
import PropTypes from 'prop-types';
import './Header.css';

export default function Header(props) {
    const {
        onBack,
        title,
    } = props;

    return (
        <div className="header">
            <div className="header-back" onClick={onBack}>
                <svg width="42" height="42">
                    <polyline
                        points="25,13 16,21 25,29"
                        stroke="#fff"
                        strokeWidth="2"
                        fill="none"
                    />
                </svg>
            </div>
            <h1 className="header-title">
                { title }
            </h1>
        </div>
    );
}

Header.propTypes = {
    onBack: PropTypes.func.isRequired,
    title: PropTypes.string.isRequired,
};

在app.jsx中：

    const onBack = useCallback(() => {
        window.history.back();
    }, []);

這裏加入一個空數組對象是避免header一直重複重渲染。