如何理解layout呢，如何理解路由和layout的关系呢？

Question

在看前端的一个文档时 layouts/index.tsx，

看到layout的这个概念，请问下，

1.如何理解layout呢，如何理解路由和layout的关系呢？
2.如何理解多层layout？

Answer 1

1. 一般来说，layout = 布局，即网页上的东西。比如上面顶部通栏，中间两栏的主体，下面一个脚步放些不常用信息之类的。
2. 路由跟 layout 没有强关联，看业务需求了
3. 多层 layout 的话，我觉得就是主体部分的细分？

Answer 2

在 Single Page Application 中，路由其实等于是一个 switch 条件，意思是如果 history.pathname(or hash?) 发生变化的时候，渲染这个 route 下的组件。伪代码如下：

onPathChange(path => {
    switch (path) {
      case "/":
        return <HomePage />
      case "/blog":
        return <BlogPage />
      default:
        return <NotFoundPage />
    }
})

---

而一般来说，页面之间都有一些固定的布局，比如页面的 Header，Aside 都是相同的。那么我们就不想跳转页面的时候重新渲染一遍这些共通的组件，所以可以将这个组件放在 page 组件的外层渲染，保持这些组件不会变化。