我可以通过react路由器-4的history.push传递一些内容吗？

Question

如何通过react-router-4的历史推送方法传递一些信息？

• 呈现用户列表
• 当单击用户时，我希望直接到新的url并传递特定的用户信息
• 然后根据传入的用户信息呈现用户。

当我思考这个问题时，另一个问题出现了，如果我能传递用户信息，反应在哪里保存用户的信息？

<List>
  {users.map(user =>
    <ListItem
      key={user.id}
      thumb={use.img}
      arrow="horizontal"
      onClick={() => this.handleUserClick(user)}
     >
      {user.nickname}
    </ListItem>
  )}
</List>
handleUserClick = (user) => {this.props.history.push(`/user/${user.id}`)}

Answer 1

您可以使用历史的推动传递一些状态

handleUserClick = (user => {
    this.props.history.push(`/user/${user.id}`, {userName: 'Bob'}); 
})

然后可以从组件访问历史记录。

const User = ({history}) => <span>Hello {history.location.state.userName}</span>

这应该是“你好鲍勃”

但是，不要滥用这一点，如果应用程序变得更加复杂，则最好将状态保持在父级的中，或者使用像redux或mobx这样的库。