React-Router: How to replace this calls in the Route callbacks
<p>When setting a react-router app, I often set it on callbacks to represent authorization filters. this leads me to such designs:</p>

<pre><code># before, in my root component
requireAuth() { ... }
noAuth() { ... }
render() {
  return (
    &lt;Router history={this.props.history}&gt;
      &lt;Route path='/' component={App} onEnter={this.requireAuth}&gt;
        &lt;Route path='toys' component={Toys}/&gt;
        ...
      &lt;Route path='/auth' component={Auth} onEnter={this.noAuth}&gt;
        ...
    &lt;/Router&gt;
  )
}
</code></pre>

<p>I am now trying to port this to nodejs and render the page in the server. Suddenly, I'm asked to group all the routes in a const. Second, I lose my root component and those <code>this.</code> callback binds, and am not able to recreate the same architecture on the server. </p>

<p>So my first problem is the route. In react, I can't return groups of components, but a component which encapsulates all the rest. So, this was my attempt:</p>

<pre><code># root component render
# after import routes from './routes'
render() {
  return (
    &lt;Router routes={routes} history={this.props.history}/&gt;
  );
}
# in routes.js
module.exports = (
  &lt;Route&gt; # is this right?
    &lt;Route path='/' component={App} onEnter={this.requireAuth}&gt;
      &lt;Route path='toys' component={Toys}/&gt;
      ...
    &lt;Route path='/auth' component={Auth} onEnter={this.noAuth}&gt;
      ...
  &lt;/Route&gt;
</code></pre>

<p>So, this doesn't seem to cut it and I get a few errors. First, I'm encapsulating all routes inside a main <code>Route</code> component. Is this correct, from a react-router perspective? Can I have kind of empty-encapsulating components?</p>

<p>Second would be: How do I bind those <code>this.</code> callbacks on the server side now? Since I'm following the tutorials, My express router looks smth like this:</p>

<pre><code>import routes from './src/components/routes';
...
app.get('*', (req, res) =&gt; {
  match(
    { routes, location: req.url },
    (err, redirectLocation, renderProps) =&gt; {
....
</code></pre>

<p>But it's breaking with:</p>

<pre><code>onEnter: undefined.requireAuth,
                  ^
TypeError: Cannot read property 'requireAuth' of undefined
</code></pre>

<p>Which is right, as routes constant is not bound to any context.</p>

<p>Or is there a more proper way to do this in react-router, and binding callbacks to routes is the wrong approach? </p>