В этом посте вы узнаете, как передавать реквизиты компонентам, обрабатываемым React Router.

видео

Почта

React Router использует декларативный компонентный подход к маршрутизации. Это означает, что когда вы хотите создать новый маршрут, вы визуализируете Route компонент. Если вы знакомы с React Router, то знаете, что для этого вы передаете Route a path и component для рендеринга, когда местоположение приложения совпадает с этим path.

<Route path='/dashboard' component={Dashboard} />

А что, если бы мы также хотели передать Dashboard опору? Есть несколько разных способов решить эту проблему, но только один правильный. Первая идея, которая может у вас возникнуть, - просто передать это как опору на Route.

<Route path='/dashboard' component={Dashboard} isAuthed={true} />

К сожалению, это не сработает. React Router не будет передавать эту опору компоненту. Вместо этого он просто проигнорирует это.

Следующая идея, которая может возникнуть, и шаблон, который я видел несколько раз, - это передать component встроенную функцию, которая создает элемент.

<Route 
  path='/dashboard' 
  component={() => <Dashboard isAuthed={true} />}
/>

Хотя технически это сработает, это не лучшее решение. Причина этого в производительности. Согласно официальным документам…

«Когда вы используете свойства компонента, маршрутизатор использует React.createElement для создания нового элемента React из данного компонента. Это означает, что если вы предоставите встроенную функцию для атрибута компонента, вы будете создавать новый компонент при каждом рендеринге. Это приводит к отключению существующего компонента и подключению нового компонента вместо простого обновления существующего компонента ».

Итак, если вы не должны передавать функцию component, каково решение? Оказалось, что команда React Router предсказала эту проблему и дала нам удобное решение. Вместо использования component используйте опору render. render принимает функциональный компонент, и эта функция не будет перемонтирована без необходимости, как в случае с component. Эта функция также получит те же свойства, что и component. Таким образом, вы можете взять их и передать компоненту rendred.

<Route 
  path='/dashboard' 
  render={(props) => <Dashboard {...props} isAuthed={true} />} 
/>

Итак, напомним, если вам нужно передать опору компоненту, визуализируемому React Router, вместо использования Routes component prop используйте его render prop, передав ему встроенную функцию, а затем передайте аргументы создаваемому элементу.

Первоначально опубликовано на сайте tylermcginnis.com 5 февраля 2018 г.