React.js 路由器的传输参数不在 URL

嗨,我想从一个页面到另一个页面并通过参数
search


type

. 我可以实现这一点吗? react router 没有这些参数 URL ?

我看这个
https://github.com/rackt/react ... ments
和使用的解决方案
<routehandler {...this.props}=""></routehandler>

, 但它不起作用,直到我传达参数 url.

有没有决定这个 ?

EDIT 1. 路线:


<route handler="{App}" name="app" path="/">
<route handler="{RealEstatesPage}/" name="realestates">
<route handler="RealEstatesPage}/" name="realestatesPrefiltered" path="realestatesPrefiltered/:search/:type">
<route handler="{RealEstateDetails}/" name="realestate">
<defaultroute handler="{MainPage}/">
</defaultroute></route>


</route></route></route>
已邀请:

莫问

赞同来自:

您提到的链接描述了两种不同的策略。 首先,动态段是简单的参数化 URLs, 其中参数作为路径的一部分传输 URL, 而不是查询字符串。 所以他们应该公开可见。

其次,您可以使用道具。 这是唯一支持的事情版本。 "behind the scenes." 此外,这是优选的方法 React. 问题是它可以发生的地方吗?

其中一个选项 - 从内部传输顶层的值
Router.run//

. 这在上面的链接中描述了,其中每个嵌入式处理程序传输都会向下或明确 , 作为
<routehandler search="{this.props.search}"></routehandler>

, 无论是批发使用
http://facebook.github.io/reac ... .html
, 作为
<routehandler {...props}=""></routehandler>

.

由于您希望它仅举办子集页面,您可以使用所投入的路由,其中​​父路由处理程序拥有正在考虑的属性作为其条件的一部分。 然后他将简单地将每个孩子作为常见细节与上述情况相同。

例如,您的路线图可能如下所示:


<route handler="{App}" name="app" path="/">
<route handler="{RealEstatesPage}/" name="realestates">
<route handler="{RealEstatePrefiltered}" name="realestatesPrefiltered">
<route handler="{RealEstateHouseDetails}/" name="homes">
<route handler="{RealEstateHouseDetails}/" name="apartments">
<route handler="{RealEstateLandDetails}/" name="land">
</route>
<route handler="{RealEstateDetails}/" name="realestate">
<defaultroute handler="{MainPage}/">
</defaultroute></route>


然后是你的组件 RealEstatePrefiltered 可能是这样的:


RealEstatePrefiltered = React.createClass/{
getInitialState: function // {
return { search: '', type: '' }; // Update from store or event.
},
render: function// {
return <div>
<routehandler search="{this.state.search}" type="{this.state.type}"></routehandler>
</div>;
}
}/;


只有一个问题:如何更改此组件的状态? 您可以使用此存储库 Flux 或者只是配置全局事件并使此组件监视器更改。
</route></route></route></route></route>

涵秋

赞同来自:

例如,您可以使用历史中的状态,因此


history.push/{
pathname: '/about',
search: '?the=search',
state: { some: 'state' }
}/

冰洋

赞同来自:

在您的第一个组件中,您可以调用此
onCick

链接或按钮


browserHistory.push/{
pathname: `/about`,
search : 'search'
state: {
type: 'type'
}
}/;


在另一个您的组件中,现在您可以捕获它们:


constructor/props/ {
super/props/;
this.state = {
search: props.location.search,
type: props.location.state.type
}
}

要回复问题请先登录注册