javascript - React-Router 算法是如何工作的？

Question

谁能解释一下 React-Router 是如何将组件组装在一起的？

我的意思是:以 React-Router 文档中的这段代码为例......

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

假设我在地址栏中输入了 URL“/inbox/messages/”。

我猜它首先调用“App”组件并将其合并到 DOM 树中。

但是它是如何进行的呢？

他们使用“this.props.children”属性。

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

但是“App”有几个 child 。对吧？

它如何决定接下来要合并的内容？ 算法是如何工作的？

Answer 1

就 react-router 文档而言，他们使用 DFS(深度优先搜索)进行 url 匹配，您可以找到它 react-router Algorithm . 你可以找到关于 DFS here