Как передать функцию в качестве реквизита в маршрут React js?

Question

Я рассмотрел много других вопросов о переполнении стека, которые выглядят аналогично моему вопросу, но ни один из них не помог.

Итак, вот что я пытаюсь сделать.

в приложении. js: По сути, я создал функцию singedInToggleHandler, которую я хочу использовать на связанной странице.

signedInToggleHandler = () => {
    this.setState( (prev) => {
      return {signedIn: !prev.signedIn};
    });
  };

<Route path = '/Login' component = {LoginScreen} 
                render = { (props) => (<LoginScreen SignedInToggleHandler = {this.signedInToggleHandler}/>)}/>

Последняя строка выше - как Я передаю функцию.

Я получаю к ней доступ затем через LoginScreen. js

 formType = <SignIn SignedInHandler = {props.SignedInToggleHandler}/>

только для передачи ее другому компоненту SignIn. js

Вход. js

function handleSubmit(event){
        console.log("Submitted");
        event.preventDefault();
        console.log(email,password);
        const user = SignIn(email,password);
        console.log(user);
        props.SignedInToggleHandler();
    }

Теперь это последнее место, где я к нему обращаюсь. Здесь я хочу использовать SignedInToggleHandler (), полученный из приложения. js , но я получаю сообщение об ошибке:

Большое спасибо за ваше время и помощь!

Answer 1

Ваша ошибка здесь

<Route path = '/Login' component = {LoginScreen} 
                render = { (props) => (<LoginScreen SignedInToggleHandler = {this.signedInToggleHandler}/>)}/>

Вы используете component реквизит с функцией render. Но согласно do c,

Предупреждение: <Route component> имеет приоритет над <Route render>, поэтому не используйте оба в одном и том же <Route>.

Чтобы решить, удалите component prop. render опора сделает это работает.

<Route path = '/Login' 
                    render = { (props) => (<LoginScreen SignedInToggleHandler = {this.signedInToggleHandler}/>)}/>