10 examples of 'react router back button' in JavaScript

237
public routerNavigate(route: string, view?: string): void {
238
  this.router.navigateToRoute(route, {
239
    diagramName: this.activeDiagram ? this.activeDiagram.name : undefined,
240
    solutionUri: this.activeSolutionEntry ? this.activeSolutionEntry.uri : undefined,
241
    view: view,
242
  });
243
}

3
export function Router(props) {
4
	if (!props.children) return; // Error?
5
6
	if (!window.onpopstate) window.onpopstate = props.routeChanged;
7
8
	const match = props.children.find(matchRoute);
9
10
	if (match) {
11
		return match.view(props.model);
12
	} else {
13
		// Not Found?
14
	}
15
}

70
back () {
71
  history.back()
72
}

51
back() {
52
  window.history.back()
53
}

100
back(): void {
101
  this.platformStrategy.back();
102
}

61
back(){
62
63
  History.back();
64
}

33
goBack() {
34
  this.props.navigator.pop();
35
}

39
LeftButton(route, navigator, index, navState) {
40
  // console.log('left route %o', route);
41
  let btnText = route.leftButtonIcon ? <Image source={route.leftButtonIcon} style={style.icon} /> :
42
    route.leftButtonTitle ? <Text style={style.navBarText}>{route.leftButtonTitle}</Text> :
43
      index === 0 ? null : <Image source={require('../../resources/icons/backward.png')} style={style.icon} />;
44
  return (
45
    <TouchableOpacity style={style.navBarLeftButton}
46
                      onPress={() => {route.onLeftButtonPress ? route.onLeftButtonPress() : navigator.pop();} }>
47
      {btnText}
48
    </TouchableOpacity>
49
  );
50
}

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
}

35
navigate() {
36
  const { menu } = this.state;
37
  if (menu) {
38
    // Pop to menu 
39
    Actions.popTo('Menu');
40
  } else if (Actions.currentScene !== 'Menu') {
41
    // Add guard so that it wont push twice]
42
    Actions.Menu();
43
  }
44
}