10 examples of 'how to handle browser back button in react js' in JavaScript

37
componentDidMount() {
38
  this._updateOnClick(this.props);
39
}

30
function BackButton(props) {
31
  const { intl, theme, ...rest } = props;
32
  const label = intl.formatMessage(messages.back);
33
  return (
34
    <IconButton label={label} {...rest}>
35
      {theme.direction === 'ltr' ? <ArrowBackIcon /> : <ArrowForwardIcon />}
36
    </IconButton>
37
  );
38
}

5
export default function useBackHandler(handler: () => void) {
6
  useEffect(() => {
7
    BackHandler.addEventListener('hardwareBackPress', handler)
8
9
    return () => {
10
      BackHandler.removeEventListener('hardwareBackPress', handler)
11
    }
12
  })
13
}

13
innerBack() {
14
    if ((document.getElementsByClassName(styles.webView) as any)[0].canGoBack()) { 
15
        (document.getElementsByClassName(styles.webView) as any)[0].goBack();
16
    }
17
}

18
onBackPress() {
19
  if (this.state.canGoBack) {
20
    this.webView.goBack();
21
  } else {
22
    this.props.navigation.goBack();
23
  }
24
}

11
function BackButton({ label, ...props }) {
12
  const theme = useTheme()
13
  const [insideBarPrimary] = useInside('Bar:primary')
14
15
  const { layoutName } = useLayout()
16
  const compact = layoutName === 'small'
17
  const horizontalPadding = (compact ? 2 : 3) * GU
18
19
  return (
20
    <ButtonBase
21
      focusRingRadius={RADIUS}
22
      focusRingSpacing={1}
23
      css={`
24
        display: inline-flex;
25
        align-items: center;
26
        border-radius: ${RADIUS}px 0 0 ${RADIUS}px;
27
        height: 100%;
28
        margin-left: ${insideBarPrimary ? -Bar.PADDING : 0}px;
29
        /* Adjust for icon's padding on the left */
30
        padding: 0 ${horizontalPadding}px 0 ${horizontalPadding - 4}px;
31
        border-right: 1px solid ${theme.border};
32
        color: ${theme.surfaceContent};
33
        background: ${theme.surfaceInteractive};
34
        &:active {
35
          background: ${theme.surfaceHighlight};
36
        }
37
      `}
38
      {...props}
39
    >
40
      <span
41
        css={`
42
          position: relative;
43
          top: 2px;
44
          color: ${theme.accent};
45
        `}
46
      >
47
        <IconArrowLeft />
48
      </span>
49
      <span
50
        css={`
51
          padding-left: ${1 * GU}px;
52
          font-size: 16px;
53
          font-weight: 600;
54
        `}
55
      >
56
        {label}
57
      </span>
58
    </ButtonBase>
59
  )
60
}

95
function addBackButtonListener(backButton) {
96
    new FastButton(backButton, function (e) {
97
        e.preventDefault();
98
        var options = this.getAttribute("data-page-options");
99
        var effect = this.getAttribute("data-transition-effect");
100
        var dataBack = backButton.getAttribute("data-back");
101
        if (dataBack !== "") {
102
            var dataBackAsInt = parseInt(dataBack);
103
            that.options = options;
104
            that.transitionEffect = effect;
105
            that.backLinkPressed = true;
106
            history.go(dataBackAsInt);
107
        }
108
    });
109
}

11
render() {
12
  const { onPress, style, visible, modal } = this.props;
13
  if (!visible) return null;
14
  return (
15
    <NavigationBarIcon
16
      name={modal ? 'ios-arrow-down' : 'ios-arrow-back'}
17
      style={style}
18
      onPress={onPress}
19
    />
20
  );
21
}

6
render() {
7
    return (React.createElement(style_1.StyledBrowserButton, { id: this.props.id, color: this.props.color ? this.props.color : 'default', onClick: this.props.onClick, disabled: this.props.disabled ? this.props.disabled : false, size: this.props.size, fontSize: this.props.fontSize }, this.props.children));
8
}

87
back() {
88
    if (this.canGoBack) {
89
        this.goBack();
90
    } else {
91
        Actions.pop();
92
    }
93
    return true;
94
}