时间戳

首页 > 解决方案 > 当用户在具有不同查询参数的相同基本 url 上时，BrowserHistory 不起作用

reactjs - 当用户在具有不同查询参数的相同基本 url 上时，BrowserHistory 不起作用

问题描述

当我使用相同的基本 URL 但具有不同的查询参数时，BrowserHistory 不起作用。

// currently i am on same url but different query param's.

**settings/organization/appointment-manager?from=2020-04-04T09:58:29.761Z&to=2020-04-04T09:58:29.761Z&pageNo=1&pageSize=30&activeKey=3**


import { browserHistory } from 'react-router';
import moment from 'moment-timezone';


refresh(){

// I want to call componentDidMount again when i push the bellow URL.

const startDate = moment();
const endDate = moment();
 browserHistory.push(`/settings/organization/appointment-manager?from=${startDate}&to=${endDate}&pageNo=1&pageSize=30&activeKey=3`);
}

当 refresh() 调用我的 URL 时更改了新参数，但没有调用 componentDidMount()。

当我在具有不同查询参数的同一个基本 URL 上时，如何再次调用 componentDidMount()。

标签： reactjsreact-router

解决方案

你应该在这里做的是你应该使用componentWillRecieveProps(). 因为你所做的只是更新router道具。

所以尝试做这个：

    componentWillReceiveProps(newProps) {
        if (newProps.location.search !== this.props.location.search) {
            //search params have changed
        }
    }

或者对于更新版本的 React

    getDerivedStateFromProps(nextProps, prevState) {
        if (nextProps.location.search !== this.props.location.search) {
            //search params have changed
        }
    }

推荐阅读