react-router4渲染组件的方式

距离上一篇文章，似乎已经过了很久了，近一个多月确实太忙，忙到没时间写一篇文章了(其实就是在为自懒找借口)。

今天，我们简单聊一下，react-router V4版本在参数上的传递。

多数情况下，Router我们是这么用的

<Switch>
    <Route path="/home" component={Home} />
    <Route path="/relation/substation-feeder" component={SubstationsFeeders} />
    ...
</Switch>

这时候，如果想给组件携带一个参数怎么办？？？

似乎没有什么好办法，那就只能曲线救国，类似于redux之类的第三方状态管理工具就有了用武之地。

那么有没有简单点的方法？？？

Router似乎还有一种写法: render

<Router>
    <Route path="/home" render={() => <div>Home</div>} />
</Router>

一般情况下，也不会直接render html标签，而是从外部的组件。

<Switch>
  <Route
    path="/home"
    render={() => {
      return (
        <Switch>
          <Route path="/home" component={Home} />
          ...
        </Switch>
      )
    }}
  />
  ...
</Switch>

其实render主要解决的是二级路由，甚至多级路由的问题。

当写到这里的时候，似乎能够发现一些什么。

Route他就是一个组件，既然是组件，那就应该可以包裹其他标签、组件之内的。

<Switch>
  <Route path="/load">
    <Secondary currentNode={treeNode} />
  </Route>
  <Route path="/topology">
    <Load currentNode={treeNode} />
  </Route>
  ...
</Switch>

直接将组件包裹到Route标签内部，那么传递参数也就水到渠成，自然而然了。