Why is dispatch() causing redirect to initialRouteName in react-navigation?

问题

I'm having a problem where every dispatch causes the navigator to redirect to my initialRouteName. Because of my componentDidUpdate methods, I eventually land on the correct screen, but only in some cases.

I have used ReactNavigation several times before without any problems. The only thing that stands out is that <NavigationContainer onStateChange is getting called once for all dispatch'd action, not just those under the navigator reducer. Is that normal?

root.js

import 'react-native-gesture-handler';
import React from 'react';
import Toast from './components/Toast';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { SafeAreaProvider } from 'react-native-safe-area-context';
...

const Drawer = createDrawerNavigator();

class Root extends React.Component {

    render() {
        return (
              <SafeAreaProvider>
                <Toast/>
                <LoadingSpinner/>
                <NavigationContainer
                    onStateChange={(state) => console.log('New State ' + state.index, state.history)} >
                    <Drawer.Navigator
                        initialRouteName='domain'
                        drawerType={'front'} >
                        <Drawer.Screen name='domain' component={Domain} />
                        <Drawer.Screen name='login' component={Login} />
                        <Drawer.Screen name='ssoLogin' component={SSOLogin} />
                        <Drawer.Screen name='home' component={Home} />
                        <Drawer.Screen name='reportList' component={Report} />
                        <Drawer.Screen name='submissionForm' component={SubmissionForm} />
                    </Drawer.Navigator>
                </NavigationContainer>
              </SafeAreaProvider>
    }
}

index.js

import 'react-native-gesture-handler'; 
import {AppRegistry} from 'react-native';
import React, {Component} from 'react';
import {createStore, applyMiddleware, compose} from 'redux';
import thunkMiddleware from 'redux-thunk';
import {Provider} from 'react-redux';

import {name as appName} from './app.json';
import reducer from './app/reducers';
import Root from './app/Root';

function configureStore(initialState) {
    const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
    const middleware = [];
    middleware.push(thunkMiddleware);

    const enhancer = composeEnhancers(
        applyMiddleware(...middleware)
    );
    return createStore(reducer, initialState, enhancer);
}

const store = configureStore({});
class App extends Component {
    render() {
        return <Provider store={store}><Root/></Provider>
    }
}

AppRegistry.registerComponent(appName, () => App);

Can you see what I'm doing wrong here?

来源：https://stackoverflow.com/questions/62294641/why-is-dispatch-causing-redirect-to-initialroutename-in-react-navigation