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

Question

我有一个使用 设置的登录表单和一个特定值 props.values.userType我需要通过 Prop 传递给我的 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

我想将这个 Prop 值传递给我的 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 /> 的 Prop , 您可以使用 render prop 将 Prop 传递给您要在该路线上呈现的组件。

例如，在您的情况下，如果您的组件名为 Login :

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

或类似的内容，具体取决于您的用例。