反应.js传递参数时路由器不在 URL 中

React.js pass parameters with Router not in URL

本文关键字：URL 路由器 js 参数 反应      更新时间：2023-09-26

嗨，我想从一个页面移动到另一个页面，并将参数传递search和type。我可以使用 URL 中没有这些参数的反应路由器来实现这一点吗？

我正在查看此 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 路径的一部分发送，而不是在查询字符串中发送。因此，这些需要公开可见。

其次，可以使用道具。这是"幕后"传递内容的唯一受支持的选项。此外，它是 React 中的首选方法。问题是，这在哪里会发生？

一种选择是从 Router.run() 中在顶层传递值。这在上面的链接中有所概述，每个嵌套处理程序都向下传递道具，要么显式地传递，如<RouteHandler search={this.props.search} />，要么使用传播属性（如 <RouteHandler {...props} />）批发。

由于您只希望它发生在页面的子集上，因此您可以使用嵌套路由，其中父路由处理程序拥有相关属性作为其状态的一部分。然后，它会将它们作为普通道具传递给每个孩子，就像上面的情况一样。

例如，您的路线图可能如下所示：

<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 = 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 存储，也可以设置一个全局事件并让此组件监视更改。

你可以在历史中使用状态，像这样

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
    }
}
相关文章：