I am relatively new to react and attempting to create an app that has 2 designs. One is the public site that has a mon header and footer and the internal app which has an admin header and side bar. I created a Router and 2 main routes '/' and '/app'. I then added subroutes hoping that if the parent routers were matched, it would show the parent ponent and pass the sub route's ponent as the this.props.children. I seemed to have done it wrong. Here is what I created.

App.js:

...
class App extends Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route ponent={Public}>
            <Route exact path="/" ponent={Home}/>
            <Route path="/login" ponent={Login}/>
          </Route>
          <Route ponent={Main}>
            <Route path="/dash" ponent={Dash}/>
            <Route path="/people" ponent={People}/>
          </Route>
        </Switch>
      </Router>
    );
  }
}
...

Public 'template':

...
render(){
    return(
      <div>
        I am a public page
        {this.props.children}
      </div>

    )
  }
...

Home.js

...
class Home extends Component{
  render(){
    return(

      <div>I am the home page</div>
    )
  }
}
...

App 'template'

...
class Main extends Component{
  render(){
    return(
      <div>
        <Header />
        <div>I am an app page</div>
        {this.props.children}
        <Footer/>
      </div>
    )
  }
}
...

Dash.js

...
class Dash extends Component{
  render(){
    return(
      <div>I am the dash page</div>

    )
  }
}
...

Thanks and if any one can tell me or point me to a good resource I would appreciate it!

I am relatively new to react and attempting to create an app that has 2 designs. One is the public site that has a mon header and footer and the internal app which has an admin header and side bar. I created a Router and 2 main routes '/' and '/app'. I then added subroutes hoping that if the parent routers were matched, it would show the parent ponent and pass the sub route's ponent as the this.props.children. I seemed to have done it wrong. Here is what I created.

App.js:

...
class App extends Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route ponent={Public}>
            <Route exact path="/" ponent={Home}/>
            <Route path="/login" ponent={Login}/>
          </Route>
          <Route ponent={Main}>
            <Route path="/dash" ponent={Dash}/>
            <Route path="/people" ponent={People}/>
          </Route>
        </Switch>
      </Router>
    );
  }
}
...

Public 'template':

...
render(){
    return(
      <div>
        I am a public page
        {this.props.children}
      </div>

    )
  }
...

Home.js

...
class Home extends Component{
  render(){
    return(

      <div>I am the home page</div>
    )
  }
}
...

App 'template'

...
class Main extends Component{
  render(){
    return(
      <div>
        <Header />
        <div>I am an app page</div>
        {this.props.children}
        <Footer/>
      </div>
    )
  }
}
...

Dash.js

...
class Dash extends Component{
  render(){
    return(
      <div>I am the dash page</div>

    )
  }
}
...

Thanks and if any one can tell me or point me to a good resource I would appreciate it!

• javascript
• reactjs
• react-router

1 Answer 1

You're really close! What you need to do is actually put the template ponents as the parent not in a <Route /> ponent. A ponents children are the ponents in between its start and end tag. Keep on trucking !

class App extends Component {
   render() {
       return (
          <Router>
           <Switch>
             <Public>
               <Route exact path="/" ponent={Home}/>
               <Route path="/login" ponent={Login}/>
             </Public >
             <Main>
               <Route path="/dash" ponent={Dash}/>
               <Route path="/people" ponent={People}/>
             </Main>
           </Switch>
         </Router>
       );
     }
   }