React Router中如何向组件传递Props？模态框嵌套视图场景

当然可以呀！不管你用的是React Router自带的Switch，还是自己封装的自定义Switch逻辑，都能轻松给嵌套的动态视图传递Props，和你平时写React组件传参的逻辑完全一致，下面分两种常见场景给你具体说明：

场景1：使用React Router的Switch组件 #

React Router的Route组件提供了多种方式来传递自定义Props，最常用的是render和component属性：

• 用render方法时，它会接收路由内置的Props（比如match、location、history），你可以把这些和自定义Props一起解构传给子组件：

<Modal>
  <Switch>
    {/* 传递路由Props + 自定义Props */}
    <Route 
      path="/modal/user-profile" 
      render={(routeProps) => (
        <UserProfile 
          {...routeProps} 
          user={currentUserState} 
          onSave={handleProfileSave} 
        />
      )} 
    />
    {/* 也可以直接用component属性，结合高阶组件或者直接传参 */}
    <Route 
      path="/modal/settings" 
      component={(props) => <Settings {...props} theme={appTheme} />} 
    />
  </Switch>
</Modal>

这样你的嵌套视图就能拿到所有需要的Props，不管是存入自身状态还是直接使用都没问题。

场景2：自定义Switch组件 #

如果是你自己实现的Switch逻辑（比如根据状态切换不同视图），那灵活性就更高了。你可以给自定义Switch设计views属性，让它接收一个包含组件和对应Props的数组：

// 自定义Switch组件
const CustomModalSwitch = ({ activeViewKey, views }) => {
  const activeItem = views.find(item => item.key === activeViewKey);
  if (!activeItem) return null;
  const { component: ActiveComponent, props } = activeItem;
  return <ActiveComponent {...props} />;
};

// 在模态框中使用
<Modal>
  <CustomModalSwitch 
    activeViewKey={currentActiveView}
    views={[
      {
        key: 'login',
        component: LoginForm,
        props: { 
          onLoginSuccess: handleLogin, 
          errorMessage: loginError 
        }
      },
      {
        key: 'signup',
        component: SignupForm,
        props: { 
          onSignupSuccess: handleSignup, 
          termsUrl: '/terms' 
        }
      }
    ]}
  />
</Modal>

这种方式能让你动态管理每个视图的Props，当状态变化时（比如loginError更新），对应的视图会自动拿到最新的Props。

小提醒 #

如果后续需要把传入的Props存入子组件的本地状态，记得用useEffect监听Props的变化，避免出现数据不一致的情况；如果不需要本地状态，直接使用Props就好，更符合React的单向数据流逻辑。

内容的提问来源于stack exchange，提问作者Clay Banks