react-navigation Cannot read property 'routes' of undefined - react-native

Question

My application to use to react-navigation the router, in accordance with the API method, the following problems:
react-navigation : why 'routes' of undefined ? https://reactnavigation.org/docs/routers
const SimpleApp = TabNavigator({})
const Simple = StackNavigator({
Home: { screen: SimpleApp },
Login: { screen: Login },
})
const defaultGetStateForAction = Simple.router.getStateForAction;
Simple.router.getStateForAction = (action, state) => {
console.log('action ===',action);
console.log('state ===',state);
console.log('......getStateForAction........');
if (true) {
const routes = [
...state.routes,
{key: 'A', routeName: 'Login', params: { name: action.name1 }},
];
return {
...state,
routes,
index: routes.length - 1,
};
}
return defaultGetStateForAction(action, state);
};
export default class App extends Component {
render() {
return (
<Simple />
)
}
}
TypeError:Cannot read property 'routes' of undefined

Answer 1

We are basically overriding the getStateForAction function.
This function is present in the StackRouter file. What it does is check if the initial state is undefined. If it is, it creates it.
StackRouter.js
getStateForAction(
action: NavigationAction,
state: ?NavigationState
): ?NavigationState {
// Set up the initial state if needed
if (!state) {
let route = {};
... // The code present in the file.
}
To learn more about this look into StackRouter.js.
As the state itself is undefined because initial state is not set, ...state.routes in the code is producing the error.
Currently this will work:
Simple.router.getStateForAction = (action, state) => {
console.log('action ===',action);
console.log('state ===',state);
console.log('......getStateForAction........');
// change the condition to check if state exists.
if (state) {
const routes = [
...state.routes,
{key: 'A', routeName: 'Login', params: { name: action.name1 }},
];
return {
...state,
routes,
index: routes.length - 1,
};
}
return defaultGetStateForAction(action, state);
};