fix(react): adding custom history to IonReactRouter, closes #20297 (#21775)

This commit is contained in:
Ely Lucas
2020-07-20 10:03:35 -06:00
committed by GitHub
parent 591c133344
commit d4a5fbd955
4 changed files with 23 additions and 12 deletions

View File

@@ -1,15 +1,21 @@
import { Action as HistoryAction, Location as HistoryLocation, createHashHistory as createHistory } from 'history';
import { Action as HistoryAction, History, Location as HistoryLocation, createHashHistory as createHistory } from 'history';
import React from 'react';
import { BrowserRouterProps, Router } from 'react-router-dom';
import { IonRouter } from './IonRouter';
export class IonReactHashRouter extends React.Component<BrowserRouterProps> {
history = createHistory(this.props);
interface IonReactHashRouterProps<THistoryLocationState = History.PoorMansUnknown> extends BrowserRouterProps {
history?: History<THistoryLocationState>;
}
export class IonReactHashRouter extends React.Component<IonReactHashRouterProps> {
history: History<History.PoorMansUnknown>;
historyListenHandler?: ((location: HistoryLocation, action: HistoryAction) => void);
constructor(props: BrowserRouterProps) {
constructor(props: IonReactHashRouterProps) {
super(props);
const { history, ...rest } = props;
this.history = history || createHistory(rest);
this.history.listen(this.handleHistoryChange.bind(this));
this.registerHistoryListener = this.registerHistoryListener.bind(this);
}

View File

@@ -1,15 +1,22 @@
import { Action as HistoryAction, Location as HistoryLocation, createBrowserHistory as createHistory } from 'history';
import { Action as HistoryAction, History, Location as HistoryLocation, createBrowserHistory as createHistory } from 'history';
import React from 'react';
import { BrowserRouterProps, Router } from 'react-router-dom';
import { IonRouter } from './IonRouter';
export class IonReactRouter extends React.Component<BrowserRouterProps> {
history = createHistory(this.props);
historyListenHandler?: ((location: HistoryLocation, action: HistoryAction) => void);
interface IonReactRouterProps<THistoryLocationState = History.PoorMansUnknown> extends BrowserRouterProps {
history?: History<THistoryLocationState>;
}
constructor(props: BrowserRouterProps) {
export class IonReactRouter extends React.Component<IonReactRouterProps> {
historyListenHandler?: ((location: HistoryLocation, action: HistoryAction) => void);
history: History<History.PoorMansUnknown>;
constructor(props: IonReactRouterProps) {
super(props);
const { history, ...rest } = props;
this.history = history || createHistory(rest);
this.history.listen(this.handleHistoryChange.bind(this));
this.registerHistoryListener = this.registerHistoryListener.bind(this);
}

View File

@@ -1,6 +1,6 @@
const port = 3000;
describe.only('Tab Context', () => {
describe('Tab Context', () => {
/*
This spec tests the IonTabsContext API
*/

View File

@@ -38,7 +38,6 @@ const App: React.FC = () => {
return (
<IonApp>
<IonReactRouter>
<Route path="/" component={Main} exact />
<Route path="/routing" component={Routing} />
<Route path="/dynamic-routes" component={DynamicRoutes} />
@@ -48,7 +47,6 @@ const App: React.FC = () => {
<Route path="/nested-outlet2" component={NestedOutlet2} />
<Route path="/replace-action" component={ReplaceAction} />
<Route path="/tab-context" component={TabsContext} />
</IonReactRouter>
</IonApp>
);