React Nested Routes throwing error - Meteor - reactjs

Question

Trying to setup a simple global layout (App), and have the path /apply render within App.
I keep getting the warning:
You should not use <Route component> and <Route children> in the same route; <Route children> will be ignored
Which I can tell 100% applies to the situation, but Google yielded no 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

I ran into this same issue today, found the solution here: Nested Routes in v4
<App>
<Route ....... />
<Route ....... />
</App>
This worked for me.

Answer 2

Found the answer, in case anyone's ran into the same examples.
You now nest the routes into your rendered top-level object, in my case App.
So you have to move <Route path="/apply" component={ApplyPage} /> to App.jsx, like this:
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>
)
}