CODEWITHSUNDEEP
javascriptreactjsreact-routerurl-routingflux
Nick Pineda
Nick Pineda

Reputation: 6462

React- Router, making sense of the transitions

I've used Angular and Flask and I've worked with routing and transitions but there is something confusing about how React-Router works.

For example from the introduction page https://github.com/rackt/react-router/blob/master/docs/Introduction.md :

React.render((
  <Router>
    <Route path="/" component={App}>
      <Route path="about" component={About} />
      <Route path="inbox" component={Inbox}>
        {/* Add the route, nested where we want the UI to nest */}
        <Route path="messages/:id" component={Message} />
      </Route>
    </Route>
  </Router>
), document.body)

The way this code nests makes it hard for me to look at this and tell you what is going to render based on the URL path we are currently at.

Like for instance is the "/" portion always going to render or just when we are at the top level endpoint?

Does "about" and "inbox render together or is it an either/or scenario?

Sorry if this is extremely obvious to some. It's had me a bit tripped up for way too long now so I wanted to ask you guys. :)

Upvotes: 1

Views: 88

Answers (1)

romseguy
romseguy

Reputation: 1563

Given the following App component:

var App = React.createClass({
  render() {
    return (
      <div>
        <h1>App title</h1>
        {this.props.children}
      </div>
    );
  }
});

Hitting / renders that component, and the this.props.children is undefined.

Hitting /about, the router first parses /, so the App component is rendered again, as before.

From there, the router drills down the routes hierarchy, to see if there's any path matching with the rest of the string i.e about. And there is:

<Route path="about" component={About} />

This route is a direct child of App, so this.props.children is now the About component, which will be rendered since we chose to render this.props.children in App.

Upvotes: 3

Related Questions