React.js 使用不在 URL 中的路由器传递参数

IT技术 javascript reactjs react-router
2021-05-16 18:13:26

嗨,我想从一页移动到另一页并传递参数searchtype. 我可以在 URL 中没有这些参数的情况下使用 react router 实现这一点吗?

我正在查看这个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>
3个回答

您提到的链接概述了两种不同的策略。首先,动态段只是参数化的 URL,其中参数作为 URL 路径的一部分而不是在查询字符串中发送。因此,这些需要公开可见。

其次,你可以使用props。这是在“幕后”传递信息的唯一支持选项。此外,它是 React 中的首选方法。问题是,哪里会发生这种情况?

一种选择是将值传递到顶层,从Router.run(). 这在上面的链接列出,每一层嵌套处理程序传递下来的props,无论是明确的,像<RouteHandler search={this.props.search} />,或批发使用传播的属性一样<RouteHandler {...props} />

由于您只希望它发生在页面的一个子集上,您可以使用嵌套路由,其中​​父路由处理程序拥有相关属性作为其状态的一部分。然后它会以与上述情况相同的方式将它们作为普通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 组件可能如下所示:

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
    }
}