IonRouterOutlet不会隐藏较旧的页面

Question

我正在尝试使用嵌套路由，我有一个登录页面和一个选项卡页面，完成身份验证后，我执行history.replace('/tabs')，并且选项卡页面呈现良好，但是当我导航时在整个botton导航中，这些组件不会隐藏，因此我正在导航的所有路径组件都同时显示在屏幕中

Tabs.tsx

const Tabs: React.FC = () => {
    const [tab, setTab] = useState('/home')
    const history = useHistory();

    const handleChange = (e, val) =>{
        history.replace('/tabs'+val, 'tab');
        setTab(val);
    }
    return (
                // <IonReactRouter>
        <IonPage >
            <IonContent>
                <Switch>
                    <IonRouterOutlet animated={true}>
                        <Route path='/tabs/home' component={Home} exact={true} />
                        <Route path='/tabs/test' component={Test} exact={true} />
                        {/* <Redirect from='/tabs' to='/tabs/home' /> */}
                    </IonRouterOutlet>
                </Switch>
            </IonContent>
            <IonFooter>
                <BottomNavigation slot='bottom' value={tab} onChange={handleChange}>
                    <BottomNavigationAction label={'Home'} value={'/home'} />
                    <BottomNavigationAction label={'Test'} value={'/test'} />
                </BottomNavigation>
            </IonFooter>
        </IonPage>
                // </IonReactRouter>
    );
};

Home.tsx

const Home: React.FC = () => {
    const location = useLocation();
    return (
        <>
            <IonContent>
                <IonTitle>Home</IonTitle>
            </IonContent>
        </>
    );
};