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

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

有没有办法送导航时沿PARAMS（对象）导航到不同的路径？

我能想到的其他选项，但想知道如果通过object是可能的吗？

2017-02-11 eugene

阵营路由器使用location对象。 location对象的其中一个属性是state。

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

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

有一点需要记住的是，如果用户直接导航到页面，将不会有state，所以当数据不存在时您仍然需要一些机制来加载数据。

2017-02-11 18:33:29

中应该提及版本号您是否得到过任何解决方案**请注意，有一点需要注意的是，如果用户直接浏览页面，则不会有任何状态，因此您仍然需要一些机制在不存在数据时加载数据。** – Anil

对用户直接导航到路由和状态时如何正常处理场景也没有定义。理想情况下，它会呈现加载组件，然后只有当数据可用时才会将它作为道具传递给组件，以便组件行为始终可以假定所需状态在其需要时存在 –

@MattMazzola我不确定是否存在“优雅“的方式，但我只是有默认的道具，并使用'componentWillMount'或'componentDidMount'来获取数据。如果可能，我已经不再使用'location.state'了。 –

传递查询参数时，在编程导航反应路由器

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

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

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

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

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实际上是从反应路由器API历史记录对象。

2017-02-11 09:18:33 therewillbecode

我不知道你使用的是哪个版本，但是你能为react-router给对象作为参数：

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

2017-02-11 09:46:26 cubbuk

在答案 – Sgnl

回答