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?

Answer 1

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. :)