React navigation bar for mobile end event logic returns

  After the user has been entangled navigation bar to return If you press the physical back key on the phone how to deal with history like the original ah!

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,
};

In app.jsx in:

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

Here the object is added to an empty array header to avoid repeated re-rendering.