渲染和子道具之间的反应路由器差异

Question

I wanted to understand the exact differences between the 2 ways of writing React <Route /> ie one with "render" and other with "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} />}
          />

Also, with the 2nd use case (ie with "children"), what difference does it make when exact property is true v/s false?

Answer 1

From the docs of

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

And

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 .

The main difference as per what I understand is that when we pass a component as children prop then that component will get rendered even if the location matches or not .

I have created a sample app in order to simulate the same, here is the app