How do properly use Onsen's Navigator in React?

Question

I'm trying to implement a simple Onsen Navigator in React.

So far I'm receiving an error 'route is not defined' and I was looking through the examples & docs but I only saw the initialRoute prop was provided, how & where does the route prop generated or something? Cause it seems like its not specified.

Here is my the code of my component:

import React, {PropTypes} from 'react';
import ons from 'onsenui';
import * as Ons from 'react-onsenui';

class SignUp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      index : 0
    };
    this.renderPage = this.renderPage.bind(this);
    this.pushPage = this.pushPage.bind(this);
  }

  pushPage(navigator) {
    navigator.pushPage({
      title: `Another page ${this.state.index}`,
      hasBackButton: true
    });

    this.setState({index: this.state.index++});
  }

  renderPage(route, navigator) {
    return (
      <Ons.Page key={route.title}>
        <section style={{margin: '16px', textAlign: 'center'}}>
          <Ons.Button onClick={this.pushPage}>

            Push Page
          </Ons.Button>
        </section>
      </Ons.Page>
    );
  }

  render() {
    return (
      <Ons.Page key={route.title}>
        <Ons.Navigator
          renderPage={this.renderPage}
          initialRoute={{
            title: 'First page',
            hasBackButton: false
          }}
        />
      </Ons.Page>
    );
  }
};

SignUp.propTypes = {
  'data-pageName': PropTypes.string.isRequired
};

export default SignUp;

Is this the right syntax in ES6? Have I missed something?

score 2 · Accepted Answer · answered Aug 16 '16 at 05:24

When using Ons.Navigator in react the two required properties are:

initialRoute - it should be an object.
renderPage - method which receives 2 arguments - route and navigator. The route should be an object similar to the initialRoute one. You provide that object when you are calling pushPage and similar methods.

It seems that you already know these 2, but there still 2 other things which you need to be careful about. They are not directly onsen related, but come up a lot when using react in general.

Whenever you have a list of dom elements (for example an array of Ons.Page tags) each of those should have a unique key property.
Whenever you use a method you need to make sure you are binding it if you need some extra arguments.

It seems you also know these two. So the only thing left is to make sure you follow them.

Your syntax is correct - the only thing missing is the route variable in SignUp.render. Maybe you originally copied the renderPage method and that is how you have a leftover Ons.Page.

If you're not putting the SignUp component inside some other navigator, tabbar or splitter then you don't actually need the Ons.Page in its render method. Those are the only cases when they are needed. If you it happens to have one of those components as a parent then you can just specify the key.

PS: I think there should be a React Component Inspector (something like this) which you can install - then I think you may be able to see the place where the error occurs. I think if you knew on which line the problem was you would have been able to solve it. :)

score 2 · Answer 2 · answered Jul 10 '18 at 01:26

For me, with the object I was passing to initialRoute(), it needed a props property, which itself was an object with a key property. See the before and after below.

Before fixing

render() {
    return (
      <Navigator
        initialRoute={{component: DataEntryPage}}
        renderPage={this.renderPage}
      />
    );
  }
}

This was causing the following console warning:

Warning: Each child in an array or iterator should have a unique "key" prop.

Check the render method of `Navigator`.

After fixing

  render() {
    return (
      <Navigator
        initialRoute={{component: DataEntryPage, props: {key: 'DataEntryPage'}}}
        renderPage={this.renderPage}
      />
    );
  }
}

Notice that the difference I needed to make was the addition of , props: {key: 'DataEntryPage'}.

Feel free to check out this medium article for more information.

How do properly use Onsen's Navigator in React?

2 Answers2