React Router 4, пропускающий реквизит через Route Render, не работает

Question

Этот вопрос был задан, но прочее ответы не решают эту проблему для меня.Я хочу передать функцию обработчика signInWithEmail из моего компонента <App /> через <Layout /> и затем в компонент <SignIn /> через <Route />.

Способ сделать это, по-видимому, с помощью атрибута render на маршруте, но для меня это просто рендер игнорирует мой onSubmit.В инструментах React dev я просто вижу реквизиты Route по умолчанию, хотя я вижу свои функции обработчика в элементе <Layout />, который отображается как props.signInWithEmail.Они не добираются до элемента <SignIn />.

Что мне не хватает?Спасибо.

const Layout = (props) => (
// i can console.log(props) here and see props.signInWithEmail
  <div className="layout">
    // header etc...
    <main>
      <Switch>
       // ... other routes
        <Route
          path="/signin"
          render= {(props) => <SignIn onSubmit={props.signInWithEmail} />}           
        />
      </Switch>
    </main>
    // footer etc...
  </div>
)}

визуализация части приложения:

  render() {
    return (
      <div className="App">
        <BrowserRouter>
          <Layout 
            signInWithEmail={this.signInWithEmail} 
            signUpWithEmail={this.signUpWithEmail} 
            signOut={this.signOut} 
            state={this.state}
          />
        </BrowserRouter>
      </div>
    );
  }

Answer 1

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

const Layout = ({signInWithEmail}) => (
// i can console.log(props) here and see props.signInWithEmail
  <div className="layout">
    // header etc...
    <main>
      <Switch>
       // ... other routes
        <Route
          path="/signin"
          render= {() => <SignIn onSubmit={signInWithEmail} />}           
        />
      </Switch>
    </main>
    // footer etc...
  </div>
)}