[V4] <Match> / <Miss> children

[jampy]

According to the docs, <Match> and <Miss> can only be configured using props and don't seem to expect any children.

Is there a good reason not to support (also) something like this?

<Match pattern="/foo">
  <SomeComponent>
    <div>
      Hello "foo"
    </div>
  </SomeComponent>
</Match>

<Match pattern="/bar">
  This is Bar!
</Match>

<Match pattern="/baz">
  <ComplexComponent
    what="ever"
    style={myStyle}
    coord={123}
    optimize={true}
    matrix={myMatrix}
  />
</Match>

I understand that this way the component does not receive props from Match/Miss, but for static routes (no :param) and for static content (for example, the This is Bar! text) this makes it much more readable, IMHO.

[jampy]

Additional use case:

<Match pattern="/config">
  <ConfigFrame>
    <Match pattern="/config/foo" component={FooConfig} />
    <Match pattern="/config/bar" component={BarConfig} />
    <Match pattern="/config/baz/:id" component={BazConfig} />
  </ConfigFrame>
</Match>

[timdorr]

Match supports children. It's at the bottom of the page you linked. The reason we take a function is so the React Element doesn't have to be instantiated unless the Match matches. In your example, the child components are always instantiated, even if the pattern doesn't match.

[ryanflorence]

@jampy some more notes on why: https://gist.github.com/ryanflorence/a301dc184f75e929a263dc1e80399a28

[jampy]

Thanks @timdorr and @ryanflorence for the hint. Makes a lot of sense performance-wise! :-)

Match supports children. It's at the bottom of the page you linked.

But children must be a function. Using simple React components like in my example above (accepting the performance risks you mentioned) leads to low level errors.

[ryanflorence]

You should have gotten a propType warning: https://github.com/ReactTraining/react-router/blob/v4/modules/Match.js#L111

[jampy]

indeed

so, no components as childs