React 路由器 - render() 不会在查询参数更改时触发

Question

我有一个带有 ?"type=specificType" 参数的容器组件。当该参数通过 Link 更改时，我想使用不同的数据子集重新渲染。

你建议我如何处理这件事？
例子：页面上 Links - ALL |鱼 |鸟类 |哺乳动物

路线为http://baseURL/animals，将渲染所有动物。

选择此 link 时 <Link to="/animals?type=birds" /> 我想重新呈现仅包含鸟类动物子集的页面，但此更改不会触发任何内容。

关于如何做到这一点有什么建议吗？

非常感谢！

Answer 1

您可以放置 Button 而不是 Link，并且在 onClick 处理程序中您可以调用 this.forceUpdate() 或 this.setState(this.state) 来触发重新呈现，然后使用 react-router

手动重定向

Answer 2

您始终可以通过以下方式收听路线变化：

browserHistory.listen()

基本上我把它放在一个变量 'routeListener' 中并在 'componentWillMount()' 上调用它。运行我想调用的任何方法 'handleRouteChange()'。

并确保通过在 'componentWillUnMount()' 中调用 routeListener() 来停止侦听器。

import React, { Component } from 'react';
import { browserHistory } from 'react-router';

let routeListener = null;

export default class SomeComponent extends Component {

    componentWillMount() {
        routeListener = browserHistory.listen( location =>  {
            this.handleRouteChange();
        });
    }

    componentWillUnmount() {
        routeListener();
    }

    handleRouteChange() {
        console.log("Detect change in route");
    }

    render() {
        return (
            <div>
              Hello World
            </div>
            )
    }
}

我希望这能解决您的问题。祝你好运

Answer 3

我不敢相信我以前没有想到这一点，但答案很简单。我将处理程序向下传递给具有过滤器 links 的组件。 When any given link was selected the "update" method simply adjusted the data and called the render() method from there.

感谢您的意见。

React 路由器 - render() 不会在查询参数更改时触发

React router - render() doesn't fire when just the query parameter changes

query-parameters

reactjs

react-router