React-router: [v4] Warnings on <Route />

[gabeweaver]

Version

4.0.0-beta.5

Test Case

MatchWithSubRoutes

import React from 'react'
import { Route } from 'react-router-dom'

const WithSubRoutes = (route) => {
  return (
    <Route {...route} render={props => (
      <route.component {...props}  routes={route.routes} />
    )} />
  )
}

export default WithSubRoutes

Route

export default [
  {
    pattern: '/',
    component: Home,
    exactly: true
  }
]

Routes Entry

const BaseRoute = () => {
  return (
      <div>
        {routes.map((route, i) => (
          <WithSubRoutes key={i} {...route}  />
        ))}
      </div>
  )
}

Steps to reproduce

1. Use the above code and replace Home with any generic component.
2. Run in a vanilla react app.
3. Console will error with Warning: You should not use <Route component> and <Route render> in the same route; <Route render> will be ignored from this warning
4. Changing component: Home to render: Home and updating the MatchWithSubRoutes to use <route.render ... /> does not return the warning.
5. In both cases, the route renders as expected.

Expected Behavior

1. When using a route config and passing in my array of routes according to the examples in the docs, I should not see any warnings.

Actual Behavior

1. When using component: ... in my route config, the console emits a warning.

Happy to open a PR with updates to the docs if that's all it is! AWESOME work :)

[timdorr]

Is that code somewhere in the docs?

The issue is you're spreading the entire route config object into the <Route>'s props in WithSubRoutes, which includes the component prop. Easiest fix is to just rename that property to something like routeComponent and render <route.routeComponent ....