Question

假设我们有一个React应用程序，其入口点如下所示：

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';

import Application from './Application';


ReactDOM.render((
    <BrowserRouter>
        <Application />
    </BrowserRouter>
), document.getElementById('root'));

在React应用程序的某个深处，我想添加（或更新）查询参数以响应某些用户操作。我可以使用反应路由器provides的history.push()方法，但是使用该方法会使Application重新呈现。

是否可以在不重新呈现Application的情况下添加或更新查询参数？我发现我可以Application更改查询参数，而无需ActivationEnd，但是我感觉像是被黑客入侵了。

Answer 1

我目前正在读一本关于反应的书，也有同样的问题。

我发现您需要向父组件添加 shouldComponentUpdate 方法，并验证 location.search 值是否不同

this.props.location.search !== nextProps.location.search

从该验证中返回true将会重新渲染该组件

P.S。这本书使用的是React Router v3，所以我很难过整个应用程序的更新和嵌套路由

P.P.S。我正在使用历史记录，现在是React Router之外的软件包

使用react-router v4添加或更新查询参数，而无需重新渲染主要组件

1 个答案: