Передача реквизита компоненту в маршрутизации React

Question

Можете ли вы объяснить, что это за линия? Что делает реквизит и {... реквизит}?

<Route exact path='/' render={props => <Home {...props} />} />

Answer 1

Объяснение

TLDR; Эти реквизиты, переданные при рендеринге, обозначаются как route-props, который предоставляет вам match, location и history объекты, через которые вы можете проходить через компоненты или использовать эти объекты так, как вы хотите в дочерних компонентах (если они пропущены через реквизиты).

{...props} просто предоставляет все свойства объекта. ... известен как расширенный синтаксис, который помогает получить все существующие свойства в упомянутом объекте (здесь props). Подобно тому, как передача компонента данных сейчас не нужна, но будет требоваться дочерними элементами через текущую структуру компонента.

Здесь {...props} приведет к match,location and history, переданному компоненту в render

React Router API

Источник - https://reacttraining.com/react-router/web/api/Route/render-func

Маршрутные реквизиты

Всем трем методам рендеринга будут переданы одинаковые три реквизита маршрута

• 1034 * Матч *
• место
• История

Визуализация (функция)

Вместо создания нового элемента React, созданного для вас с помощью компонента prop, вы можете передать функцию, которая будет вызываться при совпадении местоположения. Пропеллер рендеринга получает все те же реквизиты маршрута, что и опора рендеринга компонента.

Эти реквизиты являются внутренним API react-router v4. Вы можете увидеть больше о render методе <Route> компонента

Если вы передадите компонент и эти реквизиты в этот компонент (дочерний), вы можете зарегистрировать реквизиты, и вы найдете все три реквизита, предоставленные route-props

Реквизиты в дочернем (если вы входите в консоль в дочернем компоненте): Object {match: Object, location: Object, history: Object, staticContext: undefined}

Пример * * тысяча шестьдесят-одна

Вы можете найти примеры кодов и коробку, которую я курировал только для этого примера - https://codesandbox.io/embed/0m1z1xwxnw

Альтернатива

Если вы не хотите использовать render для внутренней рендеринга нужного вам компонента, вы можете использовать withRouter HOC и обернуть ваш компонент в этот HOC как export default withRouter(WrappedComponent), и он предоставит все три объекта, которые вы хотите, т.е. match, location и history и, следовательно, добавление его в props объект

Answer 2

...props называется spread syntax и используется для передачи каждого свойства в объекте props в качестве отдельной опоры компоненту Home.

Может быть проще понять, почему это работает, если вы скомпилировали JSX для React.createElement вызовов.

React.createElement(Home, {
  ...props
});

const obj = {
  foo: 'foo',
  bar: 'bar'
};

const props = {
  baz: 'baz',
  ...obj
};

console.log(props);

Answer 3

Попробуйте поставить свои реквизиты в скобках, вот так: <Route exact path='/' render={(props) => <Home {...props} />} />