React Router 4通過路由渲染傳遞道具不起作用

Question

有人問過這個問題，但是其他 答案並沒有為我解決。 我想通過<Layout />從<App />組件向下傳遞signInWithEmail處理函數，然后通過<Route />傳遞給<SignIn />組件。

這樣做的方法顯然是通過Route上的render屬性，但是對我來說，它只是渲染而忽略了我的onSubmit 。 在React開發工具中，即使我可以在<Layout />元素中看到我的處理函數顯示為props.signInWithEmail ，我也只能看到默認的Route道具。 他們沒有進入<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>
)}

呈現App的一部分：

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

Answer 1

發生這種情況是因為您在箭頭功能中覆蓋了道具。 嘗試像這樣破壞Layout屬性：

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>
)}