Question

我正在使用react-router v3 我在主页上有一些下拉菜单，可以在产品页面上移动按钮。当用户再次返回首页时，它应该显示与用户选择的值相同的值。但有些如何重新加载所有值。

有什么方法可以使用react-router轻松保存价值吗？

<Route path="/" component={Main} />
        <Route path="product" >
            <IndexRoute component={Product}/>
            <Route path="offer">
                <IndexRoute component={OfferForm} />
                <Route path="confirm" component={OfferConfirm}/>
            </Route>
            <Route path="immediate">
                <IndexRoute component={ImmediateOrderForm} />
                <Route path="confirm" component={OfferConfirm}/>
            </Route>
        </Route>
    </Route>

Answer 1

您可以在重定向时传递值，或者使用params导航到另一个页面，然后可以在Component中获得它。

<Redirect to={{ pathname: '/url', params: { name: edit } }} />;

在首页中获取如下所示的值

let name = this.props.location.params.name;

您可以使用如下所示的历史记录，但我认为两者是相同的。无论如何，您都需要在调用时将所有值传递到相关的路由器页面。

this.props.history.push({
  pathname: '/url',
  params: { name: edit }
});

希望这会有所帮助。我不认为您可以直接使用React Router做到这一点。

Answer 2

您需要将所选设置存储在localStorage中，并将其还原到重新加载页面上。您可以为此使用redux和redux-persist。

您还可以将详细信息页面上保存的（在页面之间共享）值用于'另请参阅类似的...'部分。似乎可以在详细信息查询中完成，但我会在单独的查询中进行（高度动态）-详细信息视图（主查询）可以是SSR版本（有/没有默认相似性），可以用新数据进行更新重新水合/安装/初始渲染后。

如何在React组件的导航上加载相同的道具？

2 个答案: