UseState inside routed functional components

Question

I'm creating my first app with react-router and was having some trouble with an invalid hook error. I did manage to fix the error, but I don't really understand why this fixed it. So, in my App component I had a Switch with the following Route:

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

Now lets suppose the SignIn component looked like this:

import React, { useState } from 'react';

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

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

export default SignIn;

With this set-up I kept getting an invalid hooks error, which only went away when I changed the Route in the App component to this:

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

Now this had solved the problem and the invalid hook problem went away, but why? I am not actually using any props in the SingIn component, at least not at the moment. Which of the React Hook Rules am I breaking here?

Answer 1

Since SignIn is a component, you can do it like this:

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

The render syntax is when you want to pass some additional props