title: How to create unique key for NavigationStateUtils using push route in React Native/Redux?
body: <p>Currently I have both Push and Pop set up using NavigationStateUtils using React Native/Redux. But when a button that triggers the Push action is pressed more than once, I get the error: <code>should not push * route with duplicated key</code> and * representing <code>route.key</code> or <code>this.props.navKey</code>. </p>
  
  <p>What may be the cause of the error? How should I go about creating a unique key for each individual route using <code>NavigationStateUtils</code>?</p>
  
  <p>This is my set up -
  Redux:</p>
  
  <pre><code>function mapStateToProps(state) {
    return {
      navigation: state.navReducer,
    }
  }
  
  export default connect(
    mapStateToProps,
    {
      pushRoute: (route) =&gt; push(route),
      popRoute: () =&gt; pop(),
    }
  )(NavigationRoot)
  </code></pre>
  
  <p>My reducer (<code>navReducer.js</code>):</p>
  
  <pre><code>const initialState = {
    index: 0,
    key: 'root',
    routes: [{
     key: 'login',
     title: 'Login',
     component: Login,
     direction: 'horizontal',
    }]
  }
  
  function navigationState (state = initialState, action) {
    switch(action.type) {
      case PUSH_ROUTE:
        if (state.routes[state.index].key === (action.route &amp;&amp; action.route.key)) return state
      return NavigationStateUtils.push(state, action.route)
  
      case POP_ROUTE:
        if (state.index === 0 || state.routes.length === 1) return state
        return NavigationStateUtils.pop(state)
  
     default:
       return state
  
    }
  }
  
  export default navigationState
  </code></pre>
  
  <p>And these methods handle push and pop and how navigation bar back (pop) button is set up:</p>
  
  <pre><code>  _renderScene (props) {
      const { route } = props.scene
  
      return (
        &lt;route.component _handleNavigate={this._handleNavigate.bind(this)} {...route.passProps} actions={this.props}/&gt;
      )
    }
  
    _handleBackAction() {
      if (this.props.navigation.index === 0) {
        return false
      }
      this.props.popRoute()
      return true
    }
  
    _handleNavigate(action) {
      switch (action &amp;&amp; action.type) {
        case 'push':
          this.props.pushRoute(action.route)
          return true
        case 'back':
        case 'pop':
          return this._handleBackAction()
        default:
          return false
      }
    }
  
  renderOverlay = (sceneProps) =&gt; {
  if(0 &lt; sceneProps.scene.index)
  {
    return (
      &lt;NavigationHeader
        {...sceneProps}
        renderLeftComponent={() =&gt; {
          switch(sceneProps.scene.route.title){
            case 'Home':
              return (
                &lt;TouchableHighlight onPress={() =&gt; this._handleBackAction()}&gt;
                  &lt;Text}&gt;X&lt;/Text&gt;
                &lt;/TouchableHighlight&gt;
              )
            }
          }
        }
      /&gt;
    )
  }
    }
  
    render() {
      return (
          &lt;NavigationCardStack
            direction={this.props.navigation.routes[this.props.navigation.index].direction}
            navigationState={this.props.navigation}
            onNavigate={this._handleNavigate.bind(this)}
            renderScene={this._renderScene}
            renderOverlay={this.renderOverlay}
          /&gt;
      )
    }
  </code></pre>
  
  <p>And called by components like so:</p>
  
  <pre><code>const route = {
    home: {
      type: 'push',
      route: {
        key: 'home',
        title: 'Home',
        component: Home,
        direction: 'vertical',
      }
    }
  }
  </code></pre>
  
  <p><strong>EDIT console log</strong></p>
  
  <p><a href="https://i.stack.imgur.com/9J4lA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9J4lA.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/f2wFB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/f2wFB.png" alt="enter image description here"></a></p>
  
  <p><strong>EDIT 2 Continuation</strong></p>
  
  <p><a href="https://i.stack.imgur.com/w9JTi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/w9JTi.png" alt="enter image description here"></a></p>
  
  <p><strong>EDIT 3 Slide Menu</strong></p>
  
  <p><a href="https://i.stack.imgur.com/2UTQW.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2UTQW.jpg" alt="enter image description here"></a></p>