Reactjs 以编程方式导航时，是否对路由器作出反应并传递数据？

我们可以使用

this.props.router.push（'/some/path'）

导航时是否有方法发送参数（对象）

我还可以想到其他的选择，但我想知道传递

对象是否可能


我可以嵌入对象的id并从服务器中重新提取对象
从新的页面

或者我可以将对象存储在全局存储中，比如redux存储。（这个东西需要很快从商店里搬走。所以我想首先把它放在那里可能不太好）

在react路由器中编程导航时传递查询参数

历史对象可以使用History.push和History.replace以编程方式更改当前位置

    history.push('/home?the=query', { some: 'state' })

如果我们将历史对象作为道具传递到组件中。然后，我们可以使用历史对象上可用的react router方法进行编程导航

现在让我们假设您将历史对象作为一个名为“路由器”的道具传递。因此，它将在基于类的语法的组件中引用，如：

this.props.router

使用push或replace时，可以将URL路径和状态指定为单独的参数，也可以将单个位置中的所有内容（如对象）作为第一个参数

this.props.router.push('/some/path?the=query')

或者，您可以使用一个类似位置的对象来指定URL和状态。这相当于上面的示例

this.props.router.push({
  pathname: '/some/path',  //path
  search: '?the=query' // query param named 'search'
})

注意-当然，请确保this.props.router实际上是react router api中的历史对象。
react router使用
位置
对象。
位置
对象的属性之一是
状态

this.props.router.push({
  pathname: '/other-page',
  state: {
    id: 7,
    color: 'green'
  }
})

在导航到的页面上，当前
位置
将被注入路由匹配的组件中，因此您可以使用
this.props.location.state
访问状态

this.props.router.push({
  pathname: '/other-page',
  state: {
    id: 7,
    color: 'green'
  }
})

需要记住的一点是，如果用户直接导航到页面，则不会出现
状态
，因此当数据不存在时，您仍然需要某种机制来加载数据。
我无法使用react router v4+实现此功能。但以下方法确实有效：

//I.e. add navigate using the history stack and pass context as the 2nd parameter
this.props.history.push('/takeTest', {
  subjectsList: this.props.subjectsList.filter(f => f.isChecked === true)
})

目前的答案已经过时了

反应路由器6：

使用
useNavigate
挂钩：

const-navigate=useNavigate（）；
导航（'/other page'，{state:{id:7，color:'green'}）；

然后，您可以通过
useLocation
hook访问“/other page”中的状态数据：

const{state}=useLocation（）；
常量{id，color}=state；//读取状态上传递的值

反应路由器4或5：

调用history.push，并将对象作为第二个参数传递到传递状态：

props.history.push（'/other page'，{id:7，颜色：'green'}））

然后，您可以通过以下方式访问“/other page”中的状态数据：

props.location.state
如果要以查询字符串形式发送

this.props.router.push({
  pathname: '/payment-history',
  query: {
    email: rowData.email
  }
})

您可以使用react路由器dom的useHistory钩子

下面的代码用于将数据传递到指定的路径，即“/dashboard”

let history = useHistory();

history.push({
            pathname: '/dashboard',
            state:{
                tags: 'your-value' 
            }
    });

通过“/dashboard”，您可以使用useHistory（）来接收上述数据。
您是否得到了解决方案？请记住，如果用户直接导航到该页面，将不会出现任何状态，因此，当数据不存在时，您仍然需要一些机制来加载数据。此外，您还对如何在用户直接导航到路由且未定义状态时优雅地处理该场景感兴趣。理想情况下，它将呈现正在加载的组件，然后仅当数据可用时才将其作为道具传递给组件，以便组件行为始终可以假定在需要时存在所需的状态it@MattMazzola我不确定是否有“优雅”的方式，但是我会使用默认的道具，并使用
componentWillMount
或
componentDidMount
来获取数据。我已经不再使用
location.state
（如果可能）。@Anil有解决方案吗？假设我们有PageA请求数据，当服务器响应时，PageA重定向到PageB并在那里传递数据。但是用户决定直接打开PageB。这是我的解决方案（理论上，我还没有实现）：当打开PageB时，它会检查是否有状态，如果没有，它会从会话（无论是本地会话还是服务器会话）请求数据，如果没有数据，它会重定向回pageA。如果另一个页面推送其他状态，例如
{size:'big}
，所有存储的状态都将替换为这个
{size:'big'}
，如何在有效地推送另一个状态时保持以前的状态？如何从/other page访问状态数据？@Suleka_28-我刚刚将该信息添加到了答案中。