Зачем проходить {... реквизит} в React Route?

Question

Я использую маршрут ниже только потому, что это был код, который я нашел в сети:

<Route exact path="/test" render={(props) => <Test {...props} msg={ "abc" } /> } />

Я знаю, что {... props} обозначает несколько аргументов, но я не могу понять, почему Мне это вообще нужно, потому что приведенный ниже код также отлично работает, и props.msg доступен в ожидаемом тесте

<Route exact path="/test" render={() => <Test msg={ "abc" } /> } />

Так что же делает {... props} при передаче во время рендеринга? *

Answer 1

Из документации :

Функция рендеринга имеет доступ ко всем тем же реквизитам маршрута (совпадение, местоположение и история), что и для компонента рендеринга.

Если Test не использует ни одного из них, вам не нужно пропускать их.

Answer 2

Для вашего случая использования достаточно второго фрагмента кода, и он будет работать просто отлично.

Распределение реквизита в дочерний компонент, например

<Route exact path="/test" render={(props) => <Test {...props} msg={ "abc" } /> } />

, имеет смысл, если вы хотите передать свойства дочернего компонента, которые вы сами не обрабатываете, а получаете из другого источника, например самого компонента маршрута (в частности, реквизиты маршрута "match", "location" и "history").

Answer 3

Имейте в виду, что в вашем маршруте могут быть параметры, например: / users /: username Эти реквизиты позволят вам получить к нему доступ. В вашем случае вам это, вероятно, не нужно, но лучше всегда включать их, чтобы оно было согласованным.

https://reacttraining.com/react-router/web/api/Route/route-props

подробнее сделайте c о трех предоставляемых реквизитах:

• совпадение https://reacttraining.com/react-router/web/api/match
• местоположение https://reacttraining.com/react-router/web/api/location
• история https://reacttraining.com/react-router/web/api/history