history.goBack() not working in Electron

@jcdege wrote:

We’re just getting started with @Ionic/react, trying to build a cross-platform app that runs on iOS/Android/Windows.

And just to keep things interesting, using TypeScript, instead of vanilla JavaScript.

Things are working surprisingly well, but we’ve an irritating problem - our back button doesn’t work in our Windows/Electron app.

It works fine when we run the app in Chrome against the Node development server. And it works fine in the iOS app. But in the Windows/Electron app, it does nothing.

We’re using the HashRouter, and calling .goBack() on the history prop, and from what I can see, this should work.

Our App.tsx:

import React from 'react';
import AppContainer from './components/Common/AppContainer';
import { HashRouter as Router } from 'react-router-dom';
import AppRoutes from './components/Common/AppRoutes';
import UpdateContainer from './components/Update/Update.Container';

const App: React.FC = (): React.ReactElement => (
    <AppContainer>
        <Router>
            <AppRoutes />
        </Router>
        <UpdateContainer />
    </AppContainer>
);

export default App;

Then our MainLayout.tsx (that contains the back button):

import React, { ReactNode, useState } from "react";
import { History } from "history";

interface MainLayoutProps {
    title: string;
    history: History;
    location: Location;
    displayBack: boolean;
}

export const MainLayout: React.FC<MainLayoutProps> = ({
    title,
    history,
    location,
    displayBack = false
}: MainLayoutProps): React.ReactElement => {

    return (
        <IonPage id="main">
            <KorHeader>
                <KorToolbar color="korterra-primary">
                    <KorButtonGroup contentPlacement={ContentPlacement.Start}>
                        <IonMenuButton />
                        {displayBack && (
                            <IonBackButton
                                style={{ display: "block" }}
                                onClick={() => {
                                    history.goBack();
                                }}
                                defaultHref="/tickets"
                            />
                        )}
                    </KorButtonGroup>
                    <KorTitle>{title}</KorTitle>
                </KorToolbar>
            </KorHeader>
            <KorContent>{children}</KorContent>
            <SyncFooter />
        </IonPage>
    );
};

From what I’ve read, this should work.

What are we doing wrong?

Posts: 1

Participants: 1

Read full topic