Question

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

呈现用户列表
点击我想直接转到新url的用户并传递特定用户信息
然后根据传入的用户信息

当我想到这个时，另一个问题出现了，如果我可以传递用户信息，React会保留用户的信息吗？

<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

您可以使用history's push

传递某个州

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

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

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

这应显示“Hello Bob”

不要滥用这一点，并且更喜欢将状态保存在父反应组件中，或者如果应用程序变得更复杂，则使用像redux或mobx这样的库。

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

1 个答案: