Question

我使用和一个特定值props.values.userType设置了登录表单，我需要通过props传递到我的index.js文件中，在其中渲染所有路线。

因此，在我的<Login>组件中，我有一个<RadioButtonGroup>，该3种类型的用户都可以使用

<RadioButtonGroup
 id="userType"
 label="User Type"
 value={values.userType}
 error={errors.userType}
 touched={touched.userType}
 onBlur={handleBlur}
>

从这里userType在formik中以props.values.userType的形式存在

我想将此属性值向下传递到我的index.js文件中，该文件将呈现我的所有路线。

index.js下方

const Routes = () => (
  <Router>
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/login" component={FormikLoginForm} />
      <PrivateRoute exact path="/admin" component={AdminPage} />
      <Route path="/admin/change-password" component={ChangePassword} />
    </Switch>
  </Router>
);

我该如何实现？

codesandbox here

Answer 1

您可以使用component道具将道具传递到要在该路线上渲染的组件中，而不是将<Route />用作每个render的道具。

例如，如果您的组件被称为Login：

<Route
  path='/login'
  render={(props) => <Login {...props} userType={props.values.userType} />}
/>

或类似情况，具体取决于您的用例。

将prop值从登录组件向下传递到路由组件

1 个答案: