Render Props - Реактивный маршрут

Question

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}  />}
      />
    </Switch>
  )
}

const About = (props) => {
  return (
    <div>
      About   
    </div>
  )
} 

В примере кода на

<Route
        path='/about'
        render={(props) => <About {...props}  />}
      />

когда реагирует на реквизит рендера компонента Route, который является частью реагирующего маршрутизатора, что он пропускает реквизит?

С учетом документации на https://reactjs.org/docs/render-props.html, реквизит рендера - это реквизит функции, который компонент использует, чтобы знать, что рендерить это значение, переданное реквизиту, скрытому в объявлении Route в activ-router

Answer 1

Вы получаете реагирующие реквизиты маршрутизатора по умолчанию при передаче реквизитов в методе рендеринга, как если бы вы использовали component вместо использования реквизитов рендеринга, которые неявно получают совпадения всех этих реквизитов, местоположение, историю и staticContext. и вам нужно предоставить реквизиты в качестве аргумента, иначе метод рендеринга не будет передавать реквизиты дочерним элементам, потому что он будет считать его неопределенным.

Вот рабочий пример рендеринга реквизита в реагирующем маршрутизаторе: https://codesandbox.io/s/72k8xz669j

Answer 2

Реквизиты передаются методу рендеринга реквизита компонентом Route. Вы можете увидеть это в исходном коде React Router. Реквизиты, переданные компонентом Route, имеют match, location, history, staticContext. Если вы хотите использовать реквизиты из родительского компонента, где вы определяете метод рендеринга реквизитов, то вы можете опустить аргумент реквизита.

render={() => <About {...props} />}

Тогда вы получите реквизит от компонента, который содержит маршрут.

Приведенный вами пример не имеет особого смысла, поскольку он повторяет поведение, которое вы получаете, просто используя реквизит 'component' на маршруте.

https://github.com/ReactTraining/react-router/blob/master/packages/react-router/modules/Route.js#L120