UseState внутри маршрутизируемых функциональных компонентов

Question

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

   <Route 
      path="/signin" 
      exact 
      render={SignIn}
   />

Теперь давайте предположим, что компонент SignIn выглядел так:

import React, { useState } from 'react';

const SignIn = () => {
  const [test, setTest] = useState('test');

  return (
    <main>
      {test}
    </main>
  )
}

export default SignIn;

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

<Route 
  path="/signin" 
  exact 
  render={(props) => <SignIn {...props}/>}
/>

Теперь это решило проблему, и проблема недействительных перехватов исчезла, но почему? На самом деле я не использую опоры в компоненте SingIn, по крайней мере, на данный момент. Какие из правил React Hook я нарушаю здесь?

Answer 1

Поскольку SignIn является компонентом, вы можете сделать это следующим образом:

<Route 
     path="/signin" 
     exact 
     component={SignIn}
/>

Синтаксис render - это когда вы хотите передать некоторые дополнительные реквизиты