Javascript React.js 使用不在 URL 中的路由器传递参数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27891667/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React.js pass parameters with Router not in URL
提问by Piotr Leniartek
Hi I want to move from one page to another and pass paramters searchand type. Can I achieve this with react router without these parameters in the URL ?
嗨，我想从一页移动到另一页并传递参数search和type. 我可以在 URL 中没有这些参数的情况下使用 react router 实现这一点吗？
I am looking at this https://github.com/rackt/react-router/blob/master/docs/guides/overview.md#dynamic-segmentsand the solutions using <RouteHandler {...this.props}/>but it is not working until I pass params to the url.
我正在查看这个https://github.com/rackt/react-router/blob/master/docs/guides/overview.md#dynamic-segments和使用的解决方案，<RouteHandler {...this.props}/>但在我将参数传递给 url 之前它不起作用.
Is there any solution for that ?
有什么解决办法吗？
EDIT 1. Routes:
编辑 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>
回答by Todd
The link you mentioned outlines the two different strategies. First, dynamic segments are just parameterized URLs, where parameters are sent as part of the URL path instead of in the query string. So these would need to be publicly visible.
您提到的链接概述了两种不同的策略。首先，动态段只是参数化的 URL，其中参数作为 URL 路径的一部分而不是在查询字符串中发送。因此，这些需要公开可见。
Second, you can use props. This is the only supported option for passing things down "behind the scenes." In addition, it's the preferred method in React. The question is, where can this happen?
其次，你可以使用道具。这是在“幕后”传递信息的唯一支持选项。此外，它是 React 中的首选方法。问题是，这可能发生在哪里？
One option is to pass the values in at the top-level, from within Router.run(). This is outlined in the link above, with each nested handler passing the props down, either explicitly, like <RouteHandler search={this.props.search} />, or wholesale using spread attributeslike <RouteHandler {...props} />.
一种选择是将值传递到顶层，从Router.run(). 这在上面的链接中进行了概述，每个嵌套处理程序都明确地传递道具，例如<RouteHandler search={this.props.search} />，或者批发使用传播属性，例如<RouteHandler {...props} />.
Since you only want it to happen for a subset of pages, you could use nested routes, wherein the parent route handler owns the properties in question as part of its state. It would then just pass them to every child as normal props in the same way as the above case.
由于您只希望它发生在页面的一个子集上，您可以使用嵌套路由，其中父路由处理程序拥有相关属性作为其状态的一部分。然后它会以与上述情况相同的方式将它们作为普通道具传递给每个孩子。
For example, your route map might look like this:
例如，您的路线图可能如下所示：
<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>
Then your RealEstatePrefiltered component might look like this:
那么您的 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>;
}
});
The only question left is, how do you change the state on this component? You could use a Flux store for this, or you could just set up a global event and have this component watch for changes.
剩下的唯一问题是，您如何更改此组件的状态？您可以为此使用 Flux 存储，或者您可以设置一个全局事件并让该组件监视更改。
回答by Mas Dan
you can use state in history, like this
你可以在历史中使用状态，像这样
history.push({
pathname: '/about',
search: '?the=search',
state: { some: 'state' }
})
回答by Dennis Mwagiru
In your first component, you can trigger this onCickof a link or button
在您的第一个组件中，您可以触发onCick链接或按钮
browserHistory.push({
pathname: `/about`,
search : 'search'
state: {
type: 'type'
}
});
In your other component, you can now grab them like:
在您的其他组件中，您现在可以像这样抓取它们：
constructor(props) {
super(props);
this.state = {
search: props.location.search,
type: props.location.state.type
}
}
