"Unique key should be defined" exception

[BodhiHu]

Version

Tell us which versions you are using:

• I'm using the latest master code

Details

Hi guys,

Really great work here 👍

Here's my Routes.js:

class Routes extends Component {
  render() {
    return (
      <Router createReducer={reducerCreate} getSceneStyle={getSceneStyle} >
        {/* § Modal */}
        <Scene key="modal" component={Modal} >

          {/* §§ root */}
          <Scene key="root" hideNavBar hideTabBar >
            <Scene key="intro" component={Intro} initial />
            <Scene key="login" direction="vertical" >
              <Scene key="loginModal" direction="vertical" component={Login} title="Login" />
              <Scene
                key="loginModal_sth"
                hideNavBar
                component={LoginModal}
                title="LoginModal"
                panHandlers={null}
                duration={1}
              />
            </Scene>
            <Scene key="home" component={Home} title="Replace" type={ActionConst.REPLACE} />

            {/* §§§ Tabs */}
            <Scene
              key="main"
              tabs
              tabBarStyle={styles.tabBarStyle}
              tabBarSelectedItemStyle={styles.tabBarSelectedItemStyle} >

              <Scene key="tab1" component={TabView} title="Tab #3" initial hideTabBar icon={TabIcon} />
              <Scene key="tab2" component={TabView} title="Tab #4" hideNavBar icon={TabIcon} />
              <Scene key="tab3" component={TabView} title="Tab #5" hideNavBar icon={TabIcon} />

            </Scene>
          </Scene>

          {/* §§ Error */}
          <Scene key="error" component={Error} />

        </Scene>
      </Router>
    )
  }
}

export default Routes

And the App.js that wrap the Routes inside redux:

  render() {
    return (
      <Provider store={store} >
        <RouterWithRedux>
          <Routes />
        </RouterWithRedux>
      </Provider>
    )
  }

Then when I try to run on ios, I got the red error box screen that shows "Unique key should be defined".

However all the scenes as seen above have keys defined for them, so I'm not sure where went wrong.

Can you help take a look at this ? Thanks : )

[ethan605]

Hi @ChrisOHu, I've faced this problem. The point is you're wrapping a Router (Routes) inside another connected Router (RouterWithRedux = connect()(Router)).

To solve this, you can simply remove RouterWithRedux and connect your Routes with react-redux APIs: RoutesContainer = connect()(Routes)

[pouu69]

Is the issue resolved? I have the same issue.

[nemosdo]

render() {
    return (
      <Provider store={store} >
        <RouterWithRedux>
          <Routes />
        </RouterWithRedux>
      </Provider>
    )
  }

change to

render() {
    return (
      <Provider store={store} >
        <RouterWithRedux scenes={scenes}/>
      </Provider>
    )
  }