Question

我们可以使用

导航到不同的路径

this.props.router.push('/some/path')

导航时有没有办法发送params（对象）？

我还可以考虑其他选项，但想知道是否可以传递object？

我可以嵌入对象的id并从服务器重新获取对象从新页面。
或者我可以将对象存储在全局存储中，例如redux store。（这个物品需要尽快从商店中删除。所以我认为把它放在那里可能不太好）

Answer 1

React Router使用location个对象。 location对象的一个属性是state。

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

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

要记住的一件事是，如果用户直接导航到页面，则不会有state，因此当数据不存在时，您仍需要一些机制来加载数据。

Answer 2

如果您使用的是React Router 4，则当前答案已过时。在React Router 4上调用history.push，并通过一个对象作为第二个参数来传递状态：

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

Answer 3

在反应路由器中以编程方式导航时传递查询参数

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

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

如果我们将历史对象作为道具传递给组件。然后我们可以使用历史对象上可用的react路由器方法以编程方式进行导航。

现在让我们假设您将历史对象作为名为＆＃39; router＆＃39;的道具传递下来。因此，它将在具有基于类的语法的组件内引用，如：

this.props.router

使用推送或替换时，您既可以将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的历史对象。

Answer 4

您可以使用react-router-dom的useHistory挂钩。

以下代码供您将数据传递到指定的路径，即“ /仪表板” 。

let history = useHistory();

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

，并且从“ /仪表板” 中，您可以使用useHistory（）接收上述数据。

Answer 5

对于函数式组件和 react-router-dom:^5.2.0 让我们举一个非常简单的例子来使概念精确

import { useHistory } from "react-router-dom";

  function Sender(){ 
  
  const history = useHistory();

  const goToReceiver = () => {
    history.push("/receiver", { name:'Mr',age:23 });
  }

  return <button onClick={goToReceiver}>Go To Receiver</button>
  }

现在让我们看看数据是如何到达 receiver route

  import { useLocation } from "react-router-dom";

  function Receiver(){ 
  
  const location = useLocation();

    return <div>
             <p>{location.state.name}</p>
             <p>{location.state.age}</p>
           </div>
  }

Answer 6

我不知道您使用的是哪个版本，但您可以将对象作为参数提供给react-router：

let {router} = this.props;
router.push({pathname: "/newpath", query: {id: 1}) // will create the url /newpath?id=1

Answer 7

我无法在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)
    })

Answer 8

如果要通过查询字符串发送

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

React路由器，以编程方式导航时传递数据？

8 个答案: