acdlite / redux-router

Redux bindings for React Router – keep your router state inside your Redux store
MIT License
2.3k stars 200 forks source link

Invalid prop `children` supplied to `ReduxRouter`, expected a ReactNode. #237

Closed HriBB closed 8 years ago

HriBB commented 8 years ago

Hello

I'm using redux-router@1.0.0-beta7 and I get this error on the server, although page renders correctly and everything works fine. Warning: Failed propType: Invalid prop children supplied to ReduxRouter, expected a ReactNode.

This is my code.

function runRouter() {
  store.dispatch(match(req.url, (error, redirectLocation, renderProps) => {

    function renderReactApp() {
      const content = ReactDOMServer.renderToString(
        <div className="cb">
          <Provider store={store}>
            <ReduxRouter {...renderProps}/>
          </Provider>
        </div>
      );
      const initialState = store.getState();
      const html = template.replace('${content}', content).replace('${data}', JSON.stringify(initialState));
      return html;
    }

    function fetchComponentData(dispatch, components, params) {
      /* ... */
    }

    fetchComponentData(store.dispatch, renderProps.components, renderProps.params)
      .then(renderReactApp)
      .then(html => res.end(html))
      .catch(err => res.end(err.message));

  }));
}

The problem is that my getRoutes() function returns an array instead of an JSX and has PropTypes.node

If I change my getRoutes() to return jsx, everything works fine.

export default function getRoutes({ getState, dispatch }) {
  const routes = [
    /* ... */
  ];
  return (
    <Route component={AppContainer} childRoutes={routes} />
  );
}
Scarysize commented 8 years ago

Hey @HriBB is this still an issue?

HriBB commented 8 years ago

@Scarysize with this version, this is not an issue anymore. I think you can close this one.

Just for the reference, if anyone hits the same problem, here's a simple workaround.

const routes = [
  { path: '/', component: HomeContainer },
  { path: 'login', component: LoginContainer },
  { path: 'map', component: MapContainer },
  { path: 'about', component: AboutContainer },
  { path: 'type/:type', component: TypeContainer },
  /* ... */
];

/*
return [{
  component: AppContainer,
  childRoutes: routes
}];
*/

// redux-router expects PropTypes.node in production
// therefore we need to return route node
return (
  <Route component={AppContainer} childRoutes={routes} />
);
Scarysize commented 8 years ago

@HriBB thanks for the quick response!