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

您提到的链接描述了两种不同的策略。 首先，动态段是简单的参数化 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

 }

}