Roles of routes and components in React Starter Kit

Question

I am currently trying to understand the way React Starter Kit lays out the project and how its part work together.

Currently struggling with routes and components. The role of routes is to decide what to display on a certain path but then there are components with App and all its sub-components, which are displayed.... around what routes define?

It seems like what's in App is always displayed. And routes define what to display inside of App as part of its children, is that correct?

WitVault · Accepted Answer · 2016-10-12T18:46:43.550

No. What is inside your App component does not always gets displayed unless or until you have defined App as root component inside your routes configuration.

e.g

  <Router history={browserHistory}>
    <Route path="/" component={App}>
      <Route path="about" component={About}/>
      <Route path="users" component={Users}>
        <Route path="/user/:userId" component={User}/>
      </Route>
      <Route path="*" component={NoMatch}/>
    </Route>
  </Router>

In above code defining

  <Route path="/" component={App}>

causes App component to be displayed first and all other route path are children of App component.

So for the second part of your question - "routes define what to display inside of App as part of its children, is that correct"

Yes you are right - But to display other components as children of root component, you have to mention it in render method of your root component via

    {this.props.children}

e.g

const App = React.createClass({
  render() {
    return (
      <div>
        <h1>App</h1>
        <ul>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/users">users</Link></li>
        </ul>
        {this.props.children}
      </div>
    )
  }
})

So Now you are telling that when url is / display my root component i.e App and if route is /about or /users display children components of App i.e About or Users component.

Your root component App is like a template where you show header, navigation bar, footer as static content. But body part where you say

{this.props.children}

is changing as your route changes with your children components.

And you would also naturally make use of components inside route definitions? — Mahoni, Oct 12 '16 at 20:25
Also what, if you don't have that overarching App frame of Header, Footer etc. but your main content is in between and you want to manipulate that on a regular basis. What does that do to that concept? — Mahoni, Oct 12 '16 at 21:11
@Mahoni It is upto you if you want to provide any header, footer or not. You can manipulate main component at any time. I just gave you template as an example. — WitVault, Oct 13 '16 at 05:11

Roles of routes and components in React Starter Kit

1 Answers1