Как я могу условно отображать маршруты и перенаправлять изменения реквизита с помощью React / Ioni c 4

Question

Я новичок в Ioni c и изо всех сил пытаюсь работать с маршрутизатором.

В моих обычных приложениях React я управляю своими маршрутами в приложении. js. Я проверяю действительный токен, если его нет, я отображаю маршруты входа. Если он доступен, я перенаправляю, например, на панель инструментов.

Пример ниже:

import React, { Component, Fragment } from 'react';
import { Route, Switch, Redirect, withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import * as actions from './store/actions';
import './App.css';

// Bring in components
import Signin from './containers/Auth/Signin';
import Homepage from './containers/Homepage/Homepage';
import AppNav from './containers/Nav/AppNav';
import Dash from './containers/Dashboard/Dash';
import Reports from './containers/Reports/Reports';


class App extends Component {
componentDidMount() {
    this.props.checkForToken();
}

render() {
    const { token } = this.props;

    let routes = (
    <Switch>
        <Route path="/" exact component={Homepage} />
        <Route path="/signin" exact component={Signin} />
        <Redirect to="/signin" />
    </Switch>
    );

    if (token !== null) {
    routes = (
        <Fragment>
        <Switch>
            <Route path="/dashboard" exact component={Dash} />
            <Route path="/reports" exact component={Reports} />
            <Route path="/" exact component={Homepage} />
            <Redirect to="/dashboard" />
        </Switch>
        <AppNav />
        </Fragment>
    );
    }

    return (
    <div>
        {routes}
    </div>
    );
}
}

const mapStateToProps = state => {
return {
    loading: state.register.loading,
    token: state.auth.token
};
};

const mapDispatchToProps = dispatch => {
return {
    checkForToken: () => dispatch(actions.checkForTokenValidity())
};
};

export default withRouter(
connect(
    mapStateToProps,
    mapDispatchToProps
)(App)
);

Я пробовал этот подход и многие его варианты в Ioni c и не могу получить что-нибудь, чтобы работать. Я попытался использовать props.history.pu sh для проверки подлинности токена, и я получаю сообщение об ошибке «не могу использовать withRouter».

Я не вижу ничего в документации Ioni c относительно этой или любых статей блога.

Вот моя последняя неудачная попытка реализовать мой обычный подход:

import React from 'react';
import { connect } from 'react-redux';
import { Redirect, Route } from 'react-router-dom';
import { IonApp, IonRouterOutlet } from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';
import './App.css';
/* Core CSS required for Ionic components to work properly */
import '@ionic/react/css/core.css';

/* Basic CSS for apps built with Ionic */
import '@ionic/react/css/normalize.css';
import '@ionic/react/css/structure.css';
import '@ionic/react/css/typography.css';

/* Optional CSS utils that can be commented out */
import '@ionic/react/css/padding.css';
import '@ionic/react/css/float-elements.css';
import '@ionic/react/css/text-alignment.css';
import '@ionic/react/css/text-transformation.css';
import '@ionic/react/css/flex-utils.css';
import '@ionic/react/css/display.css';

/* Theme variables */
import './theme/variables.css';

// Bring in custom components
import JurisdictionDashboard from './containers/Dashboards/JurisdictionDashboard';
import RegulatorDashboard from './containers/Dashboards/RegulatorDashboard';
import RegulationDashboard from './containers/Dashboards/RegulationDashboard';
import RequirementDashboard from './containers/Dashboards/RequirementDashboard';
import InitiativePage from './containers/Initiative/Initiative';
import Auth from './containers/Auth/Auth';

interface Props {
user: any;
}

const App: React.FC<Props> = (props: Props) => {
const { user } = props;
return (
    <IonApp className="app">
    <IonReactRouter>
        <IonRouterOutlet>
        {user == null ? (
            <React.Fragment>
            <Route exact path="/" render={() => <Redirect to="/Auth" />} />
            <Redirect to="/Auth" />
            </React.Fragment>
        ) : (
            <React.Fragment>
            <Route path="/Auth" component={Auth} exact={true} />
            <Route
                path="/JurisdictionDashboard/:id"
                component={JurisdictionDashboard}
                exact={true}
            />
            <Route
                path="/RegulatorDashboard/:id"
                component={RegulatorDashboard}
                exact={true}
            />
            <Route
                path="/RegulationDashboard/:id"
                component={RegulationDashboard}
                exact={true}
            />
            <Route
                path="/RequirementDashboard/:id"
                component={RequirementDashboard}
                exact={true}
            />
            <Route
                path="/Initiative/:id"
                component={InitiativePage}
                exact={true}
            />
            <Route
                exact
                path="/"
                render={() => <Redirect to="/JurisdictionDashboard/222" />}
            />
            </React.Fragment>
        )}
        </IonRouterOutlet>
    </IonReactRouter>
    </IonApp>
);
};

const mapStateToProps = (state: any) => {
return {
    user: state.auth.user
};
};

export default connect(mapStateToProps)(App);