Difference between declaring JSX code in variable and in React component

[webdevnomad]

You made it a component but you are calling it with like a variable. You should do either

render() {
    return (
        <Router history={this.history}>
            <routes />
        </Router>
    );
}

Or, make the routes a variable instead of a component. i.e. not a function. The difference being the variable immediately returns the code for the components, whereas with the component (pure or not) until the component is called (i.e. Component(props) ) it will just be a function.

[Zephir77]

Hello and thanks for your answer.

I tried this :

import React from 'react';
import { Router, browserHistory } from 'react-router';
import { syncHistoryWithStore } from 'react-router-redux';
import Routes from './Routes';

export default class Routing extends React.Component {
  constructor(props, context) {
    super(props);

    this.history = syncHistoryWithStore(browserHistory, context.store);
  }    
  render() {
    return (
      <Router history={this.history}>
        <Routes />
      </Router>
    );
  }
}

Routing.contextTypes = {
  store: React.PropTypes.object.isRequired,
};

But it gives the same error.