score:1

Accepted answer

ISSUE :

As per the doc :

The IonReactRouter component wraps the traditional BrowserRouter component from React Router, and sets the app up for routing. Therefore, use IonReactRouter in place of BrowserRouter. You can pass in any props to IonReactRouter and they will be passed down to the underlying BrowserRouter.

I think custom history is not supported by BrowserRouter, as you can see BrowserRouter supports this props, there no history props there

basename
forceRefresh
getUserConfirmation
keyLength
children

history props is available for Router

Issue on github


SOLUTION :

So I've made below changes for using custom history and it's working


index.js

import React from "react";
import { render } from "react-dom";
import App from "./App";
import { Provider } from "react-redux";
import { store } from "./helpers/store";

render(
  <Provider store={store}>
      <App />
  </Provider>,
  document.getElementById("root")
);

App.tsx

    <IonApp>
      <Router history={history}>
        {/* <IonReactRouter history={history}> */}
        <Route path="/tabs" component={MainTabs} />
        <Route exact path="/" component={LoginPage} />
        {/* </IonReactRouter> */}
      </Router>
    </IonApp>

OR

You can use something like this as hack, ref

import React from 'react'
import { History } from 'history'
import { useHistory } from 'react-router'

// Add custom property 'appHistory' to the global window object
declare global {
  interface Window { appHistory: History }
}

const MyApp: React.FC = () => {
  // Store the history object globally so we can access it outside of React components
  window.appHistory = useHistory()

  ...
}

score:1

In your code you have

<Route path "/tabs" component={MainTabs} />

When instead it should be

<Route path "/tabs/home" component={MainTabs} />

When you're trying to push your history with /tabs/home there is no route specified for that, so it won't know where to go.

Also in your index file I would recommend having an additional route like so

<Route exact path "/tabs" component={SomeComponent} />
<Route path "/tabs/home" component={MainTabs} />

Just in case you plan on having more than one path attached to your /tabs route.

score:3

Just put the exact attribute in the Route to solve this

 <Route path="/tabs" exact component={MainTabs} />
 <Route path="/login" exact component={LoginPage} />

Related Query

More Query from same tag