Preact: this.props.children an empty array in nested react-router route

[devgeeks]

This has only started since v6.1.0

import { options, h, render } from 'preact';
import { hashHistory, Route, Router, Redirect } from 'react-router';

class App extends Component {
  render() {
    return (
      <Router history={ hashHistory }>
        <Route path="main" component={ MainPage }>
          <Route path="connect" component={ ConnectTab } />
          <Route path="saved" component={ SavedTab } />
        </Route>
        <Redirect from="/" to="/main/connect" />
      </Router>
    );
  }
}

class MainPage extends Component {
  render() {
    return (
      <div className="mainPage">
        <header><h1>App name</h1></header>
        { this.props.children }
      </div>
    );
  }
}

render(<App />, document.getElementById('app'));

In 6.1.0 this.props.children is []

[developit]

So I've tracked this down: preact-compat changes VNode.children to be only a VNode instead of an Array (as React components expect). However, in 6.1.0 the algorithm for flattening children changed and it ended up not accounting for this case. I've got a fix, I'm just tweaking the size and checking performance.

[developit]

Fix released in 6.2 👯