React-Router02 静态路由和动态路由

静态路由

传统的路由一般都是静态路由，像Express等框架，使用的都是静态路由：

React.render((
  <Router>
    <Route path="/" component={App}>
      <Route path="about" component={About} />
      <Route path="inbox" component={Inbox} />
    </Route>
  </Router>
), document.body)

路由集中配置，UI与路由强绑定。

React-Router V3版本采用的就是静态路由，本质就是path到模块的映射，这种映射关系是静态的。只要程序已启动，映射关系就不能改变了。

从V4版本开始变为了动态路由。这是因为静态路由存在着天生的问题：

（1）路就有写法需要满足约定的格式，比如不能将<Route>脱离<Router>使用，这与React倡导的“可以声明式灵活性进行组件组装”的理念。

// 静态路由不支持
const CoolRoute = (props) => <Route {...props} cool={true}/>

（2）因为<Router>接管了组件，内部实现了createElement、render等方法，同时提供了组件生命周期回调onEnter、onLeave、·onChange`等，而这些生命周期React本身是为组件提供了的。

（3）为了适应代码拆分，引入了getComponent和getChildRoutes

动态路由

为了解决以上问题，V4版本中引入了动态路由的概念。

既然React组件渲染时动态发生的，在V4中可以将路由看成普通的React组件，传递props来正常使用，借助它来控制组件的展现。展示的逻辑及权利回归到了组件本身。这样没有了静态配置的路由规则，取而代之