Deep Analysis of Multi-Screen Back Navigation with React Navigation's goBack() Method

In React Navigation development, handling multi-screen back navigation often leads to situations where the goBack() method appears ineffective. This article examines a typical scenario—navigating directly from EditPage back to Cover—to deeply analyze the underlying mechanisms and solutions.

Problem Scenario and Common Misconceptions

Consider a navigation stack: Main -> Cover -> EditCover -> EditPage. When attempting to navigate from EditPage directly to Cover, developers commonly use code like:

this.props.navigation.dispatch(NavigationActions.back({key: 'EditCover'}));
this.props.navigation.goBack('EditCover');

These calls typically produce no errors but also execute no navigation. The key is understanding the parameter semantics of goBack(): it accepts the key of the screen to go back from, not the target screen's name.

Dynamic Generation Mechanism of Key Parameters

React Navigation dynamically generates unique key identifiers for each navigation route. This key is stored in this.props.navigation.state.key and assigned automatically during route creation. For example, when navigating from Cover to EditCover, the EditCover route receives a random key like id-1531415336978-2.

Thus, using screen names (e.g., 'EditCover') directly as parameters is invalid; the actual key value must be passed. This explains why goBack(null) works correctly—it closes the currently active route—while specifying a key requires exact matching.

Correct Implementation for Multi-Screen Back Navigation

To navigate from EditPage back to Cover, the key of EditCover must be passed to the EditPage component. Here is a complete implementation example:

In the EditCover component, pass the current key during navigation:

render() {
    const { navigate } = this.props.navigation;
    const { key } = this.props.route;
    return (
        <View>
            <Button title="Go to Page" onPress={() => {
                navigate('EditPage', { go_back_key: key });
            }} />
        </View>
    );
}

In the EditPage component, use the received key to perform the back navigation:

render() {
    const { goBack } = this.props.navigation;
    const { params } = this.props.route;
    return (
        <View>
            <Button title="Back to Cover" onPress={() => {
                goBack(params.go_back_key);
            }} />
        </View>
    );
}

When goBack(params.go_back_key) is called, React Navigation initiates back navigation from the specified key (EditCover), thereby closing both EditCover and EditPage, ultimately landing on the Cover screen.

Alternative Approaches and Considerations

While calling goBack(null) twice consecutively can achieve the same result, this is a temporary workaround lacking robustness. Better approaches include using navigation.pop(2) or navigation.navigate('Cover') for explicit navigation, though these may disrupt navigation history state.

Key takeaways: 1) The key in goBack(key) must be a dynamically generated route identifier; 2) Parameter passing should occur via route parameters; 3) Understanding navigation stack state management is central to avoiding such issues.