在react-route中将属性附加到组件。我该怎么办?

时间:2019-01-11 19:39:33

标签: reactjs aws-amplify react-component

我正在使用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的属性附加到从对withAuthenticator的调用返回的组件中,如下所示:

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

但是如下所示,我在render方法中使用了Route。因此,我找不到从第一步开始就将federated={federated}返回的组件附加到withAuthenticator属性的方法。

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'));

如何将属性附加到Route内的组件上?我想将属性federated附加到组件App.Login

1 个答案:

答案 0 :(得分:1)

您可以执行以下操作:

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