如何将道具传递到路由而不导致组件安装两次?

使用 component 道具vs render 属性以呈现功能组件。

根据 docs

当你使用 (而不是下面的渲染或子对象) 路由器使用 React.createElement 给定的组件。这意味着如果您提供一个内联函数 在组件属性中,每次渲染都会创建一个新组件。 . 当使用内联函数进行内联渲染时,请使用 儿童道具(下图)。

提供

<Router>
  ...
  <Route path="/:id" exact render={() => <GymMain id={params.id} appointmentTypes={appointmentTypeList} />} />
  <Route path={`/:id/:name`} render={(props) => {
    const { params } = props.match;
    const aType = appointmentTypeList.find(at => at.uri === params.name);
    return <AppointmentType id={params.id} appointmentType={aType} />
  }} />
  ...
</Router>

这不是最好的办法。 你可以用 UNSAFE_componentWillUpdate()

UNSAFE_componentWillUpdate(nextProps, nextState){
// check for your condition for updating component
 if (this.porps !== nextProps) { 
   this.forceUpdate()
}
 else {
    return
   }
}