从 Route 源码分析 children、component、render 区别和使用场景

源码分析

核心代码如下

具体源码地址

有三个属性，render、children和component，通过上面的源码，可以发现，

1. 当路由匹配上的时候

• children 可以是一个方法或者是一个组件。

• render是一个执行的方法。

• component是一个组件。

并且他们的优先级是

children > component > render

2. 当路由没匹配时

• children 只能是一个函数。

实际业务结合

1. component 这个用的最多，设置需要渲染组件，不过千万不要当成函数使用，不然会消耗性能，不断创建销毁组件。

<Route path="/somewhere" component={() => <Home />} /> // 错误的使用
<Route path="/somewhere" component={Home} /> // 正确使用

2. render 是一个函数，一般用在一些渲染组件的之前或者之后做一些事情，例如 一些需要登陆权限之类的受保护的组件，
3. children 优先级是最高的，用法跟 render 一样，但是多了一点，就算不匹配路由，children 函数也会触发，所以很适合侧边栏或面包屑组件的样式等。

 <Route
    path="/somewhere"
    children={({ match }) => (
      <li className={match ? "active" : ""}>
        <Link to={"/somewhere"}>{"/somewhere"}</Link>
      </li>
    )}
/>

具体看官方文档

额外的

我们平时用 Route 的时候，最外层都会包上 Switch，Switch只会渲染匹配上路径的路由。 所以，上面 children 的结论要附加一句话

警告

禁止在 Route 组件上同时使用这三个属性。