路由渲染属性render、children、component

摘要：在react-router 5.0中，route组件有三个支持组建渲染的属性：render、children、component

一、render

render 属性能使你便捷的渲染内联组件或是嵌套组件，你可以给这个属性传入一个函数，当路由的路径匹配时调用，而不是使用 component 创建一个新的 React 元素。同时，render属性也会接受所有由route传入的所有参数。

使用 render 可以方便地进行内联渲染和包装，而无需进行上文解释的不必要的组件重装。

 

　　//内联方式
    <Route path="path" render={() => <div>这是内联组件写法</div>} />
    //嵌套组合方式
    <Route path="path" render={ props => (
        <ParentComp>
            <Comp {...props} />
        </ParentComp>
    ) />

render 后面跟一个函数 可以获取到参数 props，注意需要把 props 绑定到后面的组件上面

render={ (props)=>{
               return (
                   <div>
                       <router.component { ...props }> //这里要把props绑定上

 　　　　　　　　　　　　　　　　{ router.children?.map((item,itemIndex)=>{ return ( <Route exact={ item.exact } key={itemIndex} path={item.path} component = { item.component } /> ) }) } </router.component>

这里还可以用render传参的方式 到父页面去渲染
最后我们到父页面，在需要渲染子路由的地方添加这个，就可以把子路由渲染到这里，跟vue的<router-view></router-view>效果一样

{ this.props.children }

二、children

children 属性是这三个属性中比较特殊的一个，它的值为一个函数，当 Route 有 children 属性时，不管当前的路径是否与Route匹配，该函数都会执行，同时，children属性也会接受所有由route传入的所有参数。

有时候不论 path 是否匹配位置，你都想渲染一些内容。在这种情况下，你可以使用 children 属性。除了不论是否匹配它都会被调用以外，它的工作原理与 render 完全一样。
children 渲染方式接收所有与 component和 render 方式相同的 route props，除非路由与 URL 不匹配，不匹配时 match 为 null。这允许你可以根据路由是否匹配动态地调整用户界面，如果路由匹配，添加一个激活类。

    <Route path="path" children={ props => (
        <div className={props.match? "active": ''}>
            <Link to="path" />
        </div>
    ) />
    

三、component

当你使用component属性时，router会通过你赋给该属性的值，使用React.createElement方法去创建一个新的React元素，这意味着如果你给component属性赋的值是一个内联函数，那他每次渲染都会创建一个新的组件，这会导致每次渲染都会伴随新组件的挂载和旧组件的卸载，而不是只是对已存在组件的更新操作。 所以当你要使用内联函数进行组件渲染时，使用render或children属性会更合适些。

指定只有当位置匹配时才会渲染的 React 组件，该组件会接收 route props 作为属性。

const Comp = props => <div>{props.match.params.name}</div>
    
<Route path="path" component={Comp} />

注意：

在使用Route的这三个属性渲染组件时还有一点值得注意，就是当这三个属性同时存在时的优先级问题，正常情况下我们基本上使用其中一个属性就可以了，但当他们同时存在时，优先渲染component的值，其次是render属性的值，而children属性的值优先级最低，为了避免 不必要的错误，尽量每个Route中只是用他们三个中的其中一个。

component > render > children

页面渲染注册路由：

import React,{ Component } from "react";
import { BrowserRouter,Route,Switch } from "react-router-dom";
import './App.css'
import routers from "./router/index";
class App extends Component<any,any>{
  render(): React.ReactNode {
    return (
        <BrowserRouter>
            <Switch>
            {
                routers.map((router,index)=>{
                    return (
                        <Route
                            exact={ router.exact }
                            key={index}
                            path={router.path}
                            render={ (props)=>{
                                return (
                                   <div>
                                       <router.component { ...props }>
                                           {
                                               router.children?.map((item,itemIndex)=>{
                                                   return (
                                                       <Route
                                                           exact={ item.exact }
                                                           key={itemIndex}
                                                           path={item.path}
                                                           component = { item.component }
                                                       />
                                                   )
                                               })
                                           }
                                       </router.component>
                                   </div>
                                )
                            } }
                        />
                    )
                })
            }
            </Switch>
        </BrowserRouter>
    )
  }
}
export default App

路由渲染属性

你有三个属性来给 <Route> 渲染组件: component ，render，和 children 。你可以查看 <Route> 文档 来了解它们的更多信息，但在这我们将重点关注component 和 render 因为这几乎是你总会用到的两个。

component 应该在你想渲染现存组件时使用 （ React.Component 或一个无状态组件）。render，只有在必须将范围内的变量传递给要渲染的组件时才能使用。你不应该使用具有内联函数的 component 属性来传递范围内的变量，因为你将要不必要的卸载/重载组件。

const Home = () => <div>Home</div>;

const App = () => {
  const someVariable = true;

  return (
    <Switch>
      {/* these are good */}
      <Route exact path="/" component={Home} />
      <Route
        path="/about"
        render={props => <About {...props} extra={someVariable} />}
      />
      {/* do not do this */}
      <Route
        path="/contact"
        component={props => <Contact {...props} extra={someVariable} />}
      />
    </Switch>
  );
};

 

参考来源：https://juejin.cn/post/6844903890370953229