React router 4 带参数的路由，从"/album?id=1"访问"/album?id=2"该如何重新渲染？

Question

<HashRouter>
        <main>
          <Switch>
            <Route exact path="/" component={IndexPage} />
            <Route path="/login" component={Login} />
            <Route path="/album" component={Album} />
          </Switch>
        </main>
      </HashRouter>

如题，定义了一个名为album的route，
然后在此路由的component的componentDidMount里，
获取到this.props.location.search,即"?id=1",通过异步获取数据然后更新store，触发此组件的re-render，
这个组件里面有个链接为"/album?id=2"的Link,由于只改变了查询字段，没有触及pathname的更新，所以此链接能点，history也会更新，componentDidUpdate也能看到props.location.search改变，但是store并不更新，所以组件也不会re-render...
所以我该在什么地方更新store呢？

Answer 1

可以使用componentWillReceiveProps重新渲染，这个钩子函数会在组件传入的 props 发生变化时调用。

componentWillReceiveProps(nextProps) {
    console.log(nextProps, this.props);
    
    // 可以通过nextProp获取改变后的props，也可以通过this.props获取当前的props
    // 此处处理重绘逻辑(通过setState触发视图渲染)...
  }

Answer 2

首先你的/album路由需要改造一下:

//:id 为你的id参数占位标记
<Route path="/album/:id" component={Album} />

在Album中

class Album extends Component {
    componentDidMount() {
        //这里获取你每次url中id位的值
        let id = this.props.match.params.id;
        //依据id参数变化 触发你的业务
        //如:这里使用redux
        this.props.action.getAlbum(id)
    }
    render(){
        //这个就是你的stroe,mapStateToProps中做了映射,大致意思就是,只要你触发了此类reducer的状态变化,那么这个状态就会改变,所以这里的状态永远都是最新的,也正是你想要的.
        console.log(this.props.album);
        return(
            ...
        )
    }
}
const mapStateToProps = (state) => {
    return {
        album: state.album,
    }
};
const mapDispatchToProps = (dispatch) => {
    return {
        action: bindActionCreators(albumActions, dispatch)
    }
};
export default connect(mapStateToProps, mapDispatchToProps)(Album);