Error reactions nested routes - Meteor

Question

Trying to set up a simple global layout (application) and have a /applyrender path in the application. I keep getting a warning:

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

I can say that 100% refers to the situation, but Google did not give any relevant answers / solutions to my problem.

Routes.jsx

import React from 'react';
import { render } from "react-dom";
import { Router, Route, IndexRoute } from "react-router";

import createBrowserHistory from "history/createBrowserHistory";
const history = createBrowserHistory();

// route components
import App from "./App.jsx";
import ApplyPage from "./pages/ApplyPage.jsx";

export const renderRoutes = () => (
  <Router history={history}>
      <Route path="/" component={App}>
        <Route path="apply" component={ApplyPage}/>
      </Route>
  </Router>
);

App.jsx

import React, { Component } from 'react'

import TopBar from "./components/TopBar.jsx"
import LeftMenuContainer from "./components/LeftMenuContainer.jsx"
import LivePurchases from "./components/LivePurchases.jsx"

export default class App extends Component {
    render() {
        console.log(this.props);
        return (
            <div className="App">
                <div className="flexWrapperGlobal">
                    <TopBar/>
                    <div className="contentContainer">
                        <LeftMenuContainer/>
                        <div className="bodyContainer">
                            <LivePurchases/>
                            <div className="siteContentContainer">
                                {this.props.children}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

ApplyPage.jsx

import React, { Component } from 'react'

export default class ApplyPage extends Component {
    render() {
        return (
        <div className="applyContainer">
            <div className="applySubContainer">
                <div className="applyBlock">
                    <h4>Seller Application</h4>
                    <form>
                        <h5>Roblox Account</h5>
                        <input type="text" placeholder="Username"/>
                        <h5>Selling Experience</h5>
                        <textarea type="text" placeholder="Selling Experience"/>
                        <h5>Extra Information</h5>
                        <textarea type="text" placeholder="Extra Information"/>
                    </form>
                    <a className="btn">Send</a>
                </div>
            </div>
        </div>
        )
    }
}

Answer 1

Today I ran into the same problem, found a solution here: Nested routes in version 4

<App>
 <Route ....... />
 <Route ....... />
</App>

It worked for me.

Answer 2

, - .

, App.

, <Route path="/apply" component={ApplyPage} /> App.jsx, :

render() {
    return (
        <div className="App">
            <div className="flexWrapperGlobal">
                <TopBar/>
                <div className="contentContainer">
                    <LeftMenuContainer/>
                    <div className="bodyContainer">
                        <LivePurchases/>
                        <div className="siteContentContainer">
                            <Route path="/apply" component={ApplyPage} />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}