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
    
35
      {theme.direction === 'ltr' ?  : }
36
    
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
    
21
      <span>
22
        
23
      </span>
24
      <span>
25
        {label}
26
      </span>
27
    
28
  )
29
}

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
    
16
  );
17
}

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
}