Передать состояние useState компоненту маршрутизатора в React

Question

С компонентами на основе классов я мог бы передать состояние компонентам, которые отображаются реквизитами, говоря:

<Route path='/someroute' component={SomeComponent} someprop={someprop} />

Однако теперь я использую перехватчики реагирования, и мое состояние определено как:

const [myProjects, setMyProjects] = useState([
     {projectName: Some project, id: 1},
     {projectName: Some project, id: 2},
]);

Теперь маршрут игнорирует эту опору. Я читал что-то о людях, использующих что-то вроде рендера вместо компонента. Но усилия и объем кода, который на это уходит, кажутся мне слишком хакерскими или много? Я имею в виду хуки были введены для лучшего кода. А теперь простой «someprop = {someprop}» должен быть заменен кодовым блоком?

Я также читал кое-что о роутере v5 с некоторыми новыми вещами, но я не мог найти надежный и чистый способ передачи реквизита.

Может кто-нибудь немного рассказать мне об этом?

Заранее спасибо за время!

Обновление с ответом

Если вы здесь после поиска в Google, вот песочница с решением! Это основано на выбранном решении / ответе. Другие зрители также могут увидеть это, чтобы увидеть проблему, с которой я столкнулся. Может быть, у кого-то есть дополнительная информация. Я все еще изучаю React, и gosh это большая кривая обучения для меня, ха-ха

https://codesandbox.io/s/admiring-diffie-9kfgx?file= / src / App. js

Answer 1

Это не имеет ничего общего с хуками или нет, оно основано на том, как работает React Router Dom.

Если вам не нужны реквизиты match, location или history, тогда вы можете упростить ваш компонент;

<Route path='/someroute'>
   <SomeComponent someprop={someprop}/>
</Route>

Если вам это нужно, вы можете использовать один из крючков React Router в своем дочернем компоненте, чтобы получить их, вы можете использовать сделать опору маршрута . Вы определенно не хотите попробовать это с компонент prop , так как это создаст новый компонент в каждом рендере.

<Route path='/someroute' render={routeProps=><SomeComponent {...routeProps} someprop={someprop}/>}  />

Другой способ сделать это - использовать withRouter Компонент высшего порядка:

//outside of the parent component
const SomeComponentWithRouter = withRouter(SomeComponent);

//In the render function:

<Route path='/someroute'>
   <SomeComponentWithRouter someprop={someprop}/>
</Route>

Редактировать вопросы для постеров:

1. Показанный вами тег рендера, вызывает ли он ненужные повторные рендеры? Я кое-что об этом читал.

Насколько мне известно, реквизит рендеринга не вызывает ненужных повторных рендеров. Возможно, вы подумали о том, что попытка того же, что и при рендеринге с компонентом, вызывает проблемы:

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

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

https://tylermcginnis.com/react-router-pass-props-to-components/

Reactjs - `component` vs` render` в Route

И я должен спросить, не могли бы вы опубликовать дружественную для новичков ссылку на «withRouter», о котором вы говорили?

Опять же, я должен отослать вас к документации React Router . Это один из лучших источников информации о React Router, который постоянно обновляется.

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

Больше ничего не нужно скажем, с withRouter, у меня есть пример того, как его использовать, и он добавляет эти 3 реквизита в ваш компонент.

Я лично рекомендовал бы использовать ловушки , которые предоставляет React Router, если вы работают с компонентами функций, так как они не требуют компонентов более высокого порядка. Как и любые другие крючки, их проще составить с помощью любого пользовательского крючка или функционального компонента.

https://css-tricks.com/the-hooks-of-react-router/

Answer 2

Вы пробовали это?

<Route path="/someroute" render={(props) => <SomeComponent {...props} someprop={someprop} />} />