React Nested Routes throwing error - Meteor

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>
        )
    }
}

Possible duplicate of [Nested Routes in v4](http://stackoverflow.com/questions/42095600/nested-routes-in-v4) — Alexei Levenkov, Apr 15 '17 at 01:23

score 3 · Answer 1 · edited May 23 '17 at 10:31

3

I ran into this same issue today, found the solution here: Nested Routes in v4

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

This worked for me.

edited May 23 '17 at 10:31

Community

1
1

answered Mar 17 '17 at 21:50

pbarrasso

156
3

1

you would need to use 'exact' attribute of Route to make router differentiate between /parent and /parent/child – Den Roman May 11 '17 at 13:33

score 0 · Answer 2 · answered Mar 17 '17 at 03:48

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>
    )
}

Is there no need to add a `` now? Would it route by doing this only? — Crazy Psychild, Mar 20 '17 at 09:50

React Nested Routes throwing error - Meteor

2 Answers2