如何在ReactJS中通过链接传递多个状态

Question

我想为我的下一页传递多个状态，该状态是我从另一个页面重定向的。

我已经通过了一个，并且运行良好。

<Link to ={{pathname: "/CreateEventUser", state: { bucket_id: !this.state.selected_bucket.id ? this.state.recent_bucket : this.state.selected_bucket } }} >
 <button type="button" className="btn btn-danger">Create an Event</button>
</Link>

现在我必须通过两个状态。其语法是什么？

<Link to ={{pathname: "/EventDetailsUser", state: { bucket_id: !this.state.selected_bucket.id ? this.state.recent_bucket : this.state.selected_bucket, eventId: event.id}}} >

Answer 1

位置路径名中的

state

参数接受一个对象，因此您可以通过将它们作为对象传递来传递任意数量的值，如下所示：

<Link to ={{
    pathname: "/CreateEventUser", 
    state: { 
        bucket_id: !this.state.selected_bucket.id ? this.state.recent_bucket : this.state.selected_bucket, 
        new_id: this.state.newID, 
        anotherValue: this.state.anotherValue 
    }
   }} >
 <button type="button" className="btn btn-danger">Create an Event</button>
</Link>

Answer 2

方式 1：这是通过链接状态发送多个状态的方法： 发送：

<Link
   to={{
      pathname: "/app/style/form",
      state: {
             item: item,
             styleList: styleList
      },
   }}
>
Go Button
</Link>

您将如何接收数据 收到：

let stateData = props.location.state
var styleUpdate = stateData["item"]
var styleList = stateData['styleList']

方式2： 您还可以更改要保存状态的变量的名称。（自定义状态名称） 发送：

<Link 
    to={{
        pathname: "/app/style/form", 
        styleList: styleList
    }}>
    Go Next
</Link>

接收：

let styleList = props.location.styleList

Answer 3

根据更新的react-router-dom

<Link
  to={{
       pathname: DESIRED_PATH,
     }}
  state={{ yourData: yourData}}
  style={{ textDecoration: 'none' }}
 >
   <Button
   >
       Navigate
   </Button>
</Link>