您好,我想从一页移动到另一页并传递参数 search
和 type
.如果 URL 中没有这些参数,我可以使用 React 路由器实现此目的吗?
我正在看这个https://github.com/rackt/react-router/blob/master/docs/guides/overview.md#dynamic-segments以及使用 <RouteHandler {...this.props}/>
的解决方案但在我将参数传递给 url 之前它不起作用。
有什么解决办法吗?
编辑 1. 路线:
<Route name="app" path="/" handler={App}>
<Route name="realestates" handler={RealEstatesPage}/>
<Route name="realestatesPrefiltered" path="realestatesPrefiltered/:search/:type" handler=RealEstatesPage}/>
<Route name="realestate" handler={RealEstateDetails}/>
<DefaultRoute handler={MainPage}/>
</Route>
最佳答案
您提到的链接概述了两种不同的策略。首先,动态段只是参数化的 URL,其中参数作为 URL 路径的一部分而不是在查询字符串中发送。所以这些都需要公开可见。
其次,你可以使用 Prop 。这是“在幕后”传递信息的唯一受支持选项。此外,它是 React 中的首选方法。问题是,这会发生在哪里?
一个选项是在顶层从 Router.run()
中传递值.这在上面的链接中有概述,每个嵌套处理程序都将 Prop 向下传递,或者显式传递,例如 <RouteHandler search={this.props.search} />
, 或批发使用 spread attributes喜欢<RouteHandler {...props} />
.
由于您只希望它发生在页面的子集上,您可以使用嵌套路由,其中父路由处理程序拥有相关属性作为其状态的一部分。然后它将以与上述情况相同的方式将它们作为普 channel 具传递给每个 child 。
例如,您的路线图可能如下所示:
<Route name="app" path="/" handler={App}>
<Route name="realestates" handler={RealEstatesPage}/>
<Route name="realestatesPrefiltered" handler={RealEstatePrefiltered}>
<Route name="homes" handler={RealEstateHouseDetails}/>
<Route name="apartments" handler={RealEstateHouseDetails}/>
<Route name="land" handler={RealEstateLandDetails}/>
</Route>
<Route name="realestate" handler={RealEstateDetails}/>
<DefaultRoute handler={MainPage}/>
</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} />
</div>;
}
});
剩下的唯一问题是,如何更改此组件的状态?您可以为此使用 Flux 存储,或者您可以只设置一个全局事件并让此组件监视更改。
关于javascript - React.js 不在 URL 中使用路由器传递参数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27891667/