How does the React-Router algorithm work?

Question

Can anyone explain me how React-Router assembles the components together?

What I mean is: Take for example this code from the React-Router documentation ...

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

Let's say I enter the URL "/inbox/messages/" into the adressbar.

I guess it calls first the "App" component and incorporates that into the DOM-tree.

But how does it goes on?

They use they the "this.props.children" property.

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

But "App" has several children. Right?

How does it decide what it has to incorporate next? How does the algorithm work?

Rafi Ud Daula Refat · Accepted Answer · 2016-08-28 13:21:08Z

1

As far the react-router documentation says for url matching they use a DFS(Depth First Search) You can find it react-router Algorithm. And you can find about DFS here

answered Aug 28, 2016 at 13:21

Rafi Ud Daula Refat

2,25520 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How does the React-Router algorithm work?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related