reactjs - React router render 和 children Prop 之间的区别

Question

我想了解两种编写 React 的方式之间的确切区别 <Route />即一个带有“render”，另一个带有“children” Prop ；

// With "render"
    <Route
          path={route.path}
          render={props => (
            // pass the sub-routes down to keep nesting
            <route.component {...props} routes={route.routes} />
          )}
        />

// With "children"
    <Route
            path={route.path}
            exact={route.exact}
            children={props => <route.component {...props} routes={route.routes} />}
          />

此外，对于第二个用例(即“ child ”)，确切属性为真与假时有什么区别？

Answer 1

来自的文档

React Router's render function

This allows for convenient inline rendering and wrapping without the undesired remounting explained above.Instead of having a new React element created for you using the component prop, you can pass in a function to be called when the location matches

和

React Router's children function

Sometimes you need to render whether the path matches the location or not. In these cases, you can use the function children prop. It works exactly like render except that it gets called whether there is a match or not.

根据我的理解，主要区别在于，当我们将组件作为 children 属性传递时，即使位置匹配或不匹配，该组件也会被渲染。

我已经创建了一个示例应用程序来模拟相同的应用程序，here is the app