[v4] MatchProvider.render() fails to return valid react element

[kennetpostigo]

Taking v4.0.0-2 for a spin after checking out the website. But I keep running into this error:

I thought that perhaps one of my components were what was causing the issue but I went through all of them and could not find any reason in my components but still same error. So then I removed <Navbar /> component and all <Match /> components except for the first one that uses the pattern '/' and it worked. But As soon as I add one more to the mix it fails. So I thought okay what If I add another that renders the same HomeContainer component. Again it still failed to render.

Heres the code that fails:

import React from 'react';
import Router from 'react-router/BrowserRouter'
import Match from 'react-router/Match'
import Miss from 'react-router/Miss'
// other components...

render(
  (
    <Provider store={store}>
      <Router>
        <Navbar isAuthenticated={true}/>

        <Match exactly pattern='/' component={HomeContainer}/>
        <Match pattern='/:username' component={ProfileContainer} />
        <Match pattern='/:username/:repo' component={RepoContainer} />
        <Match pattern='studio' component={StudioContainer} />
        <Miss component={NotFound} />
      </Router>
    </Provider>
  ), document.getElementById('app')
);

This code below works:

import React from 'react';
import Router from 'react-router/BrowserRouter'
import Match from 'react-router/Match'
import Miss from 'react-router/Miss'
// other components...

render(
  (
    <Provider store={store}>
      <Router>
        <Match exactly pattern='/' component={HomeContainer}/>
      </Router>
    </Provider>
  ), document.getElementById('app')
);

This code also fails:

import React from 'react';
import Router from 'react-router/BrowserRouter'
import Match from 'react-router/Match'
import Miss from 'react-router/Miss'
// other components...

render(
  (
    <Provider store={store}>
      <Router>
        <Match exactly pattern='/' component={HomeContainer}/>
        <Match pattern='/lol' component={HomeContainer} />
      </Router>
    </Provider>
  ), document.getElementById('app')
);

I've tried to follow along with the website but can't seem to find a fix.

[threepointone]

The router needs to have just one child. Try wrapping the children with a div like so -

  <Router>
    <div>
      <Match exactly pattern='/' component={HomeContainer}/>
      <Match pattern='/lol' component={HomeContainer} />
    </div>
  </Router>

[kennetpostigo]

@threepointone thank you!

[WishCow]

I just run into this, the docs seem to suggest (incorrectly) that multiple children can be there:

https://react-router-website-xvufzcovng.now.sh/quick-start

(also, there is an overflow: hidden on one of the top wrapper elements, so the docs are not scrollable)

[timdorr]

This is fixed in #3849. Whenever Ryan can update the site, it'll have a <div> wrapper.

[aaugustin]

Indeed, this isn't obvious at all, especially given the claim that "if you know React you can use React Router". Regular React components don't have this restriction. Any chance it could be lifted, perhaps just by adding the <div> automatically if it isn't there?

[aaugustin]

Another related pitfall: if you have a container component whose render method is merely:

render = () => (this.props.children)

you can't put a bunch of <Match>s in that component.

This is a surprising deviation from regular React and it's worth documenting IMO.

Anyway, thanks for router v4, the API no longer rubs me the wrong way!

[mjackson]

@aaugustin It's definitely a deviation from React's DOM components, which all (I think?) accept multiple children. But it's actually not uncommon for compound components. In fact, there even exists a special method, React.Children.only, specifically for the case of compound components that only accept a single child. I'm going to amend the code to use it here so people aren't surprised.

[steida]

@mjackson https://github.com/yahoo/react-intl/blob/master/src/components/provider.js#L173