代码之家  ›  专栏  ›  技术社区  ›  Suhail Gupta

将属性附加到React Route中的组件。我怎么能这样做?

  •  0
  • Suhail Gupta  · 技术社区  · 7 年前

    我正在使用 aws-amplify-react 设置身份验证过程。在我的一个文件中,我导出了从 withAuthenticator 如下(稍后在主呈现页面中使用):

    import { ConfirmSignIn,ConfirmSignUp, ForgotPassword, SignIn, VerifyContact, withAuthenticator } from 'aws-amplify-react';
    import Jobs from './job_page';
    
    export default withAuthenticator(Jobs, false, [
        <SignIn/>,
        <ConfirmSignIn/>,
        <VerifyContact/>,
        <ConfirmSignUp/>,
        <ForgotPassword/>
      ]);
    

    这个 documentation 正如我上面所链接的,附加了一个名为 federated 到从调用返回的组件 使用验证器 如下:

    const AppWithAuth = withAuthenticator(App);
    ReactDOM.render(<AppWithAuth federated={federated}/>, document.getElementById('root'));
    

    但如下图所示,我使用 Route 在渲染方法中。因为这个,我找不到一个方法 federated={federated} 从返回组件的属性 使用验证器 从第一步开始。

    ReactDom.render(
        <Provider store={createStoreWithMiddleware(reducers)}>
            <BrowserRouter>
                <div>
                    <Switch>
                        <Route path="/jobs" component={App.Jobs} />
                        <Route path="/editor" component={App.VideoEditor} />
                        <Route path="/" component={App.Login} />
                    </Switch>
                </div>
            </BrowserRouter>
        </Provider>
        , document.querySelector('.container'));
    

    如何将属性附加到内部组件 路线 ?我想附加财产 联邦的 到组件 App.Login .

    1 回复  |  直到 7 年前
        1
  •  1
  •   Piyush Zalani    7 年前

    您可以执行以下操作:

    <Route path="/" render={() => <App.Login federated={federated} />} />