Reactjs 反应路由器4传递道具到动态组件

我有一个医生列表，我试图在选中时动态呈现详细信息页面。我看到大多数人建议通过路线组件传递道具，类似这样：

<Route path={`${match.url}/:name`}
  component={ (props) => <DoctorView doctor={this.props.doctors} {...props} />}
  />

}
/>

虽然我不清楚我应该在哪里执行这个。我在Doctolist和DoctorItem中试过，但都不起作用。因此，我已经在应用程序组件中设置了路由，我可以选择一个医生，然后呈现DoctorView组件并显示match.params道具。但是如何将所选医生数据获取到DoctorView？我可能让事情变得更难了。这是我的密码：

App.jsx

const App = () => {
  return (
    <div>
      <NavigationBar />
      <FlashMessagesList />
      <Switch>
        <Route exact path="/" component={Greeting} />
        <Route path="/signup" component={SignupPage} />
        <Route path="/login" component={LoginPage} />
        <Route path="/content" component={requireAuth(ShareContentPage)} />
        <Route path="/doctors" component={requireAuth(Doctors)} />
        <Route path="/doctor/:name" component={requireAuth(DoctorView)} />
      </Switch>
    </div>
  );
}

const-App=（）=>{
返回(
);
}

DoctorList.jsx

class DoctorList extends React.Component {
  render() {
    const { doctors } = this.props;
    const linkList = doctors.map((doctor, index) => {
      return (
        <DoctorItem doctor={doctor} key={index} />
      );
    });

    return (
      <div>
        <h3>Doctor List</h3>
        <ul>{linkList}</ul>
      </div>
    );
  }
}

class DoctorList扩展了React.Component{
render（）{
const{doctors}=this.props；
const linkList=doctors.map（（医生，索引）=>{
返回(
);
});
返回(
医生名单
{linkList}
);
}
}

DoctorItem.jsx

const DoctorItem = ({ doctor, match }) => (
  <div>
    <Link
      to={{ pathname:`/doctor/${doctor.profile.first_name}-${doctor.profile.last_name}` }}>
      {doctor.profile.first_name} {doctor.profile.last_name}
    </Link>
  </div>
);

constdoctorItem=（{doctor，match}）=>(
{doctor.profile.first_name}{doctor.profile.last_name}
);

DoctorView.jsx

const DoctorItem = ({ doctor, match }) => (
  <div>
    <Link
      to={{ pathname:`/doctor/${doctor.profile.first_name}-${doctor.profile.last_name}` }}>
      {doctor.profile.first_name} {doctor.profile.last_name}
    </Link>
  </div>
);

constdoctorItem=（{doctor，match}）=>(
{doctor.profile.first_name}{doctor.profile.last_name}
);

我可以通过Redux访问医生列表，我可以连接组件，输入列表并比较id，但这感觉像是很多不必要的步骤

但是如何将所选医生数据获取到DoctorView

请记住，使用类似于

/items

和

/items/：id

的路径会创建一个场景，您可能会首先登录到详细信息页面

你是否：

a） 是否仍要获取所有项目，因为您可能会返回列表页

b） 只需要获取那一项的信息

两个答案都不是“正确的”，但在一天结束时，你可能会得到三条信息：

1） 项目id

2） 单项

3） 项目列表（可能包含也可能不包含详细信息页面所需的所有信息）

无论您想在何处显示项目的全部详细信息，它都需要通过道具访问该项目。将所有项目的详细信息放在url中是很困难的，而且这将使情况A变得不可能

因为您使用的是redux，所以从url中的标识符获取项目的详细信息非常有意义

export default 
  connect((state, props) => ({
    doctor: state.doctorList.find(doctor => 
      doctor.id === props.match.params.id
    )
  }))(DoctorView)

---

^看起来是不是额外的步骤太多了？

虽然上面的答案很好地解决了这个问题，但我只想补充一点，使用带有

组件的内联函数是不可取的

而不是做：

<Route path={`${match.url}/:name`}
  component={ (props) => <DoctorView doctor={this.props.doctors} {...props} />}
  />

}
/>

您应该像这样使用它：

 <Route path={`${match.url}/:name`}
  render={ (props) => <DoctorView doctor={this.props.doctors} {...props} />}
  />

}
/>

这将防止在每次装载时创建相同的组件，而是使用相同的组件并相应地更新状态

希望这能帮助某人
你想要整个医生对象，对吗？不仅仅是名字？没错。医生是从外部API请求接收的医生对象数组。我想显示所选医生对象的所有详细信息。我能够在DoctorList组件中呈现所有细节，但我想在单独的视图中显示它们。谢谢您的回答，现在比较id确实有意义。请原谅我的天真，因为我正在努力学习React/Redux，我不确定如何实现您提供的示例。我是创建一个容器，比较id并将匹配的医生传递给视图组件，还是在我问题中发布的DoctorView中比较它们？谢谢！我能够收到匹配医生的物品。你完全正确，一步也没有。非常感谢！