React Router v4: Component and Children in the same route

Question

I am a beginner with react and have upgraded a base project to react router v4. The app seems to be working fine, but I am always getting the following warning:

Warning: You should not use <Route component> and <Route children> in the same route; <Route children> will be ignored

This is my app (leaving some imports out for readability):

index.js

ReactDOM.render(
    <Provider store={createStoreWithMiddleware(reducers)}>
        <BrowserRouter>{routes}</BrowserRouter>
    </Provider>
    , document.getElementById('root')
);

routes.js:

import {
  BrowserRouter as Router,
  Route,
  Switch,
  Link
} from 'react-router-dom';


export default (
    <Main>
      <Route path="/topics/create" component={CreateTopicView}> </Route>
      <Route path="/topics/search" component={SearchTopicsView}> </Route>
      <Route path="/topics/manage" component={ManageTopicsView}> </Route>
      <Route path="/moderation/pre" component={ModerationPreView}> </Route>
      <Route path="/moderation/post" component={ModerationPostView}></Route>
      <Route path="/dashboard" component={DashboardView}> </Route>
      <Route exact={true} path="/" component={DashboardView}> </Route>
    </Main>
);

main.js:

import PropTypes from 'prop-types'
import { withRouter } from 'react-router'


class Main extends React.Component {
    static propTypes = {
        match: PropTypes.object.isRequired,
        location: PropTypes.object.isRequired,
        history: PropTypes.object.isRequired
      }

    render() {
        let wrapperClass = "gray-bg " + this.props.location.pathname;
        return (
            <div id="wrapper">
                <Progress />
                <Navigation location={this.props.location}/>

                <div id="page-wrapper" className={wrapperClass}>

                    <TopHeader />

                    {this.props.children}

                    <Footer />

                </div>

            </div>

        )
    }
}


export default withRouter(Main)

The idea is that most components in the Main component (e.g. the Navbar) should always be loaded, also the Navbar needs to know the current path so it can display the current selection.

Then between the TopHeader and Footer the variable content should be shown based on the path.

What am I doing wrong, how can I solve the warning about Route Component and Route Children in the same path?

Thats because you have space between your Routes. which behave as a children and routes in v4 are not suppose to have children <Route path="/topics/create" component={CreateTopicView}>{/* you have space here */}</Route> — Shubham Khatri
@Mustika You should post this as an answer and accept it so others can see that your problem was solved,. — Purgatory

Mustika Mustika · Accepted Answer · 2017-09-16T21:57:57

As Shubham Khatri mentioned in the comment, the warning was caused by a space I had after the route opening tag:

Thats because you have space between your Routes. which behave as a children and routes in v4 are not suppose to have children <Route path="/topics/create" component={CreateTopicView}>{/* you have space here */}</Route>

Changing the Route definitions to

<Route path="/topics/create" component={CreateTopicView}></Route>

or

<Route path="/topics/create" component={CreateTopicView} />

fixed the warning

React Router v4: Component and Children in the same route

1 Answers